From 9f8288f8b871ecf45e36c889814f57c7fca8f610 Mon Sep 17 00:00:00 2001
From: BitcrushedHeart <215311041+BitcrushedHeart@users.noreply.github.com>
Date: Sun, 5 Jul 2026 14:41:51 +0100
Subject: [PATCH 1/2] Introduce Electron-based webui

Add an Electron + React (Vite/Tailwind) desktop frontend and a FastAPI
bridge in web/, giving OneTrainer a modern GUI alongside the existing
customtkinter UI without touching the training backend.

- web/backend: FastAPI app with routers for config, presets, concepts,
  samples, sampling, training, tools (dataset/video/caption utilities),
  converter, tensorboard, wiki, secrets, system/GPU info and mask editor,
  plus WebSocket handlers for training/system/terminal streams.
- web/gui: Electron main process, preload/IPC bridge, splash screen, and
  a React renderer with pages mirroring the desktop UI's tabs
  (general/model/training/lora/embedding/tools/performance/etc.),
  Tailwind styling, and generated TypeScript types/schemas mirrored from
  the Python config and enum classes.
- web/scripts: generators that introspect modules/util/config and
  modules/util/enum to emit TypeScript types, UI schemas, and metadata,
  plus a hardcoded-option checker and ESLint runner, keeping the web UI
  in sync with the Python source of truth.
- Root-level start-web-ui.bat/.sh, install.bat, and CI lint workflow to
  build/launch the new frontend and lint it in CI.
- Bug fixes folded in: path traversal hardening in path_security.py,
  timestep distribution correctness, performance page and system
  websocket fixes, safer yt-dlp invocation (video_service.py), and an
  eslint globals fix for Node-context scripts.
---
 .github/workflows/web-ui-lint.yml             |   26 +
 .gitignore                                    |   13 +
 .pre-commit-config.yaml                       |   17 +-
 install.bat                                   |   32 +
 lib.include.sh                                |   35 +
 start-web-ui.bat                              |   80 +
 start-web-ui.sh                               |   36 +
 update.bat                                    |   35 +
 web/backend/main.py                           |   89 +
 web/backend/models/__init__.py                |    0
 web/backend/paths.py                          |    6 +
 web/backend/requirements.txt                  |    9 +
 web/backend/routers/__init__.py               |    0
 web/backend/routers/concepts.py               |  463 ++++++
 web/backend/routers/config.py                 |  140 ++
 web/backend/routers/converter.py              |  133 ++
 web/backend/routers/health.py                 |   45 +
 web/backend/routers/mask_editor.py            |  169 ++
 web/backend/routers/presets.py                |  110 ++
 web/backend/routers/samples.py                |   43 +
 web/backend/routers/sampling.py               |   64 +
 web/backend/routers/secrets.py                |  115 ++
 web/backend/routers/system.py                 |  176 ++
 web/backend/routers/tensorboard.py            |   53 +
 web/backend/routers/tools.py                  |  359 ++++
 web/backend/routers/training.py               |   87 +
 web/backend/routers/video_tools.py            |  128 ++
 web/backend/routers/wiki.py                   |  238 +++
 web/backend/services/__init__.py              |    0
 web/backend/services/_serialization.py        |   32 +
 web/backend/services/_singleton.py            |   19 +
 web/backend/services/concept_service.py       |   39 +
 web/backend/services/config_service.py        |  224 +++
 web/backend/services/log_service.py           |  111 ++
 web/backend/services/monitor_service.py       |   40 +
 web/backend/services/sampler_service.py       |  246 +++
 web/backend/services/tensorboard_service.py   |  252 +++
 web/backend/services/tool_service.py          |  856 ++++++++++
 web/backend/services/trainer_service.py       |  312 ++++
 web/backend/services/video_service.py         |  683 ++++++++
 web/backend/utils/__init__.py                 |    0
 web/backend/utils/gpu_info.py                 |  200 +++
 web/backend/utils/path_security.py            |  123 ++
 web/backend/ws/__init__.py                    |    0
 web/backend/ws/connection_manager.py          |   81 +
 web/backend/ws/system_ws.py                   |   35 +
 web/backend/ws/terminal_ws.py                 |   40 +
 web/backend/ws/training_ws.py                 |   32 +
 web/gui/.gitignore                            |    3 +
 web/gui/.prettierrc.json                      |   11 +
 web/gui/electron-builder.yml                  |   62 +
 web/gui/eslint.config.js                      |   51 +
 web/gui/index.html                            |   29 +
 web/gui/package.json                          |   62 +
 web/gui/scripts/rename-cjs.mjs                |   48 +
 web/gui/src/main/index.ts                     |  698 ++++++++
 web/gui/src/main/preload.ts                   |   31 +
 web/gui/src/main/splash.html                  |  244 +++
 web/gui/src/main/splash.ts                    |   99 ++
 web/gui/src/renderer/App.tsx                  |  144 ++
 web/gui/src/renderer/api/configApi.ts         |  164 ++
 web/gui/src/renderer/api/request.ts           |   66 +
 web/gui/src/renderer/api/samplingApi.ts       |   54 +
 web/gui/src/renderer/api/systemApi.ts         |   19 +
 web/gui/src/renderer/api/toolsApi.ts          |  244 +++
 web/gui/src/renderer/api/trainingApi.ts       |   47 +
 web/gui/src/renderer/api/videoToolsApi.ts     |   72 +
 .../src/renderer/components/ErrorBoundary.tsx |  124 ++
 .../components/concepts/AspectBucketChart.tsx |  138 ++
 .../components/concepts/ConceptCard.tsx       |  141 ++
 .../components/concepts/ConceptGeneralTab.tsx |   84 +
 .../components/concepts/ConceptGrid.tsx       |  123 ++
 .../concepts/ConceptImageAugTab.tsx           |  151 ++
 .../components/concepts/ConceptStatsPanel.tsx |  376 +++++
 .../components/concepts/ConceptTextAugTab.tsx |  100 ++
 .../components/concepts/ImagePreviewPanel.tsx |  214 +++
 .../components/embeddings/EmbeddingCard.tsx   |   64 +
 .../components/embeddings/EmbeddingList.tsx   |   46 +
 .../renderer/components/layout/BottomBar.tsx  |  262 +++
 .../components/layout/TabNavigation.tsx       |  102 ++
 .../components/layout/TerminalPanel.tsx       |  189 +++
 .../src/renderer/components/layout/TopBar.tsx |  224 +++
 .../mask-editor/MaskEditorCanvas.tsx          |  405 +++++
 .../components/modals/CaptionToolModal.tsx    |  521 ++++++
 .../components/modals/ConceptEditorModal.tsx  |  112 ++
 .../components/modals/ConvertModelModal.tsx   |  160 ++
 .../components/modals/ManualSamplingModal.tsx |  159 ++
 .../components/modals/MaskToolModal.tsx       |  250 +++
 .../renderer/components/modals/ModalBase.tsx  |  132 ++
 .../components/modals/MuonAdamModal.tsx       |  107 ++
 .../components/modals/OffloadingModal.tsx     |   46 +
 .../modals/OptimizerParamsModal.tsx           |  136 ++
 .../components/modals/ProfilingPanel.tsx      |   95 ++
 .../components/modals/SampleParamsModal.tsx   |  102 ++
 .../components/modals/SavePresetModal.tsx     |   68 +
 .../modals/SchedulerParamsModal.tsx           |  128 ++
 .../modals/StandaloneSamplingModal.tsx        |  316 ++++
 .../components/modals/TimestepDistModal.tsx   |  262 +++
 .../components/modals/VideoToolModal.tsx      |  515 ++++++
 .../components/sampling/SampleCard.tsx        |   53 +
 .../components/sampling/SampleList.tsx        |   48 +
 .../components/schema/SchemaModal.tsx         |   54 +
 .../components/schema/SchemaTabRenderer.tsx   |  192 +++
 .../components/shared/ArrayItemHeader.tsx     |   39 +
 .../src/renderer/components/shared/Button.tsx |   50 +
 .../src/renderer/components/shared/Card.tsx   |   16 +
 .../renderer/components/shared/DirPicker.tsx  |    7 +
 .../components/shared/DualProgress.tsx        |   28 +
 .../renderer/components/shared/EmptyState.tsx |   32 +
 .../renderer/components/shared/FilePicker.tsx |    7 +
 .../renderer/components/shared/FormEntry.tsx  |  103 ++
 .../components/shared/FormFieldWrapper.tsx    |   53 +
 .../renderer/components/shared/IconButton.tsx |   44 +
 .../components/shared/LayerFilterEntry.tsx    |   83 +
 .../renderer/components/shared/PathPicker.tsx |   82 +
 .../components/shared/ProgressBar.tsx         |   42 +
 .../components/shared/ScalarChart.tsx         |  200 +++
 .../components/shared/SchemaField.tsx         |   76 +
 .../components/shared/SectionCard.tsx         |   25 +
 .../src/renderer/components/shared/Select.tsx |   94 ++
 .../renderer/components/shared/Skeleton.tsx   |   17 +
 .../components/shared/SliderEntry.tsx         |   96 ++
 .../renderer/components/shared/TimeEntry.tsx  |   52 +
 .../src/renderer/components/shared/Toggle.tsx |   68 +
 .../renderer/components/shared/Tooltip.tsx    |  217 +++
 .../src/renderer/components/shared/index.ts   |   21 +
 web/gui/src/renderer/hooks/useArrayField.ts   |   49 +
 web/gui/src/renderer/hooks/useConfigField.ts  |   21 +
 web/gui/src/renderer/hooks/useElapsedTime.ts  |   18 +
 web/gui/src/renderer/hooks/useMaskEditor.ts   |  184 +++
 .../hooks/useReconnectingWebSocket.ts         |   92 ++
 .../renderer/hooks/useTerminalWebSocket.ts    |   61 +
 web/gui/src/renderer/hooks/useToolPolling.ts  |   66 +
 .../renderer/hooks/useTrainingWebSocket.ts    |  150 ++
 web/gui/src/renderer/main.tsx                 |   35 +
 web/gui/src/renderer/pages/ConceptsPage.tsx   |  233 +++
 web/gui/src/renderer/pages/EmbeddingsPage.tsx |   75 +
 web/gui/src/renderer/pages/HelpPage.tsx       |  158 ++
 web/gui/src/renderer/pages/MaskEditorPage.tsx |  440 +++++
 .../src/renderer/pages/PerformancePage.tsx    |  553 +++++++
 web/gui/src/renderer/pages/RunPage.tsx        |  423 +++++
 web/gui/src/renderer/pages/SamplingPage.tsx   |  128 ++
 web/gui/src/renderer/pages/ToolsPage.tsx      |   92 ++
 web/gui/src/renderer/store/configStore.ts     |  491 ++++++
 web/gui/src/renderer/store/trainingStore.ts   |  160 ++
 web/gui/src/renderer/store/uiSchemaStore.ts   |   53 +
 web/gui/src/renderer/store/uiStore.ts         |   37 +
 web/gui/src/renderer/styles/app.css           |  688 ++++++++
 web/gui/src/renderer/styles/globals.css       |  337 ++++
 web/gui/src/renderer/styles/theme.ts          |   15 +
 web/gui/src/renderer/types/electron.d.ts      |    7 +
 web/gui/src/renderer/types/uiSchema.ts        |   94 ++
 web/gui/src/renderer/utils/chartUtils.ts      |   36 +
 web/gui/src/renderer/utils/conditionEval.ts   |   50 +
 web/gui/src/renderer/utils/enumLabels.ts      |    1 +
 web/gui/src/renderer/utils/formatDuration.ts  |    8 +
 web/gui/src/renderer/utils/inputStyles.ts     |   45 +
 web/gui/src/renderer/utils/markdown.ts        |  276 ++++
 .../renderer/utils/timestepDistribution.ts    |  192 +++
 web/gui/src/renderer/utils/tooltips.ts        |    1 +
 web/gui/src/renderer/vite-env.d.ts            |    1 +
 web/gui/src/shared/brandColors.ts             |   26 +
 web/gui/src/shared/electron-api.ts            |   26 +
 web/gui/src/shared/ipc-channels.ts            |   14 +
 web/gui/tsconfig.json                         |   26 +
 web/gui/tsconfig.main.json                    |   13 +
 web/gui/vite.config.ts                        |   59 +
 web/scripts/check_hardcoded_options.py        |  135 ++
 web/scripts/generate_types.py                 | 1437 +++++++++++++++++
 web/scripts/generate_ui_schema.py             |  642 ++++++++
 web/scripts/run_eslint.py                     |   25 +
 web/scripts/run_generate_types.js             |   50 +
 web/scripts/ui_metadata.py                    | 1017 ++++++++++++
 web/scripts/ui_parser.py                      |  995 ++++++++++++
 174 files changed, 25559 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/web-ui-lint.yml
 create mode 100644 start-web-ui.bat
 create mode 100644 start-web-ui.sh
 create mode 100644 web/backend/main.py
 create mode 100644 web/backend/models/__init__.py
 create mode 100644 web/backend/paths.py
 create mode 100644 web/backend/requirements.txt
 create mode 100644 web/backend/routers/__init__.py
 create mode 100644 web/backend/routers/concepts.py
 create mode 100644 web/backend/routers/config.py
 create mode 100644 web/backend/routers/converter.py
 create mode 100644 web/backend/routers/health.py
 create mode 100644 web/backend/routers/mask_editor.py
 create mode 100644 web/backend/routers/presets.py
 create mode 100644 web/backend/routers/samples.py
 create mode 100644 web/backend/routers/sampling.py
 create mode 100644 web/backend/routers/secrets.py
 create mode 100644 web/backend/routers/system.py
 create mode 100644 web/backend/routers/tensorboard.py
 create mode 100644 web/backend/routers/tools.py
 create mode 100644 web/backend/routers/training.py
 create mode 100644 web/backend/routers/video_tools.py
 create mode 100644 web/backend/routers/wiki.py
 create mode 100644 web/backend/services/__init__.py
 create mode 100644 web/backend/services/_serialization.py
 create mode 100644 web/backend/services/_singleton.py
 create mode 100644 web/backend/services/concept_service.py
 create mode 100644 web/backend/services/config_service.py
 create mode 100644 web/backend/services/log_service.py
 create mode 100644 web/backend/services/monitor_service.py
 create mode 100644 web/backend/services/sampler_service.py
 create mode 100644 web/backend/services/tensorboard_service.py
 create mode 100644 web/backend/services/tool_service.py
 create mode 100644 web/backend/services/trainer_service.py
 create mode 100644 web/backend/services/video_service.py
 create mode 100644 web/backend/utils/__init__.py
 create mode 100644 web/backend/utils/gpu_info.py
 create mode 100644 web/backend/utils/path_security.py
 create mode 100644 web/backend/ws/__init__.py
 create mode 100644 web/backend/ws/connection_manager.py
 create mode 100644 web/backend/ws/system_ws.py
 create mode 100644 web/backend/ws/terminal_ws.py
 create mode 100644 web/backend/ws/training_ws.py
 create mode 100644 web/gui/.gitignore
 create mode 100644 web/gui/.prettierrc.json
 create mode 100644 web/gui/electron-builder.yml
 create mode 100644 web/gui/eslint.config.js
 create mode 100644 web/gui/index.html
 create mode 100644 web/gui/package.json
 create mode 100644 web/gui/scripts/rename-cjs.mjs
 create mode 100644 web/gui/src/main/index.ts
 create mode 100644 web/gui/src/main/preload.ts
 create mode 100644 web/gui/src/main/splash.html
 create mode 100644 web/gui/src/main/splash.ts
 create mode 100644 web/gui/src/renderer/App.tsx
 create mode 100644 web/gui/src/renderer/api/configApi.ts
 create mode 100644 web/gui/src/renderer/api/request.ts
 create mode 100644 web/gui/src/renderer/api/samplingApi.ts
 create mode 100644 web/gui/src/renderer/api/systemApi.ts
 create mode 100644 web/gui/src/renderer/api/toolsApi.ts
 create mode 100644 web/gui/src/renderer/api/trainingApi.ts
 create mode 100644 web/gui/src/renderer/api/videoToolsApi.ts
 create mode 100644 web/gui/src/renderer/components/ErrorBoundary.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/AspectBucketChart.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ConceptCard.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ConceptGeneralTab.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ConceptGrid.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ConceptImageAugTab.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ConceptStatsPanel.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ConceptTextAugTab.tsx
 create mode 100644 web/gui/src/renderer/components/concepts/ImagePreviewPanel.tsx
 create mode 100644 web/gui/src/renderer/components/embeddings/EmbeddingCard.tsx
 create mode 100644 web/gui/src/renderer/components/embeddings/EmbeddingList.tsx
 create mode 100644 web/gui/src/renderer/components/layout/BottomBar.tsx
 create mode 100644 web/gui/src/renderer/components/layout/TabNavigation.tsx
 create mode 100644 web/gui/src/renderer/components/layout/TerminalPanel.tsx
 create mode 100644 web/gui/src/renderer/components/layout/TopBar.tsx
 create mode 100644 web/gui/src/renderer/components/mask-editor/MaskEditorCanvas.tsx
 create mode 100644 web/gui/src/renderer/components/modals/CaptionToolModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/ConceptEditorModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/ConvertModelModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/ManualSamplingModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/MaskToolModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/ModalBase.tsx
 create mode 100644 web/gui/src/renderer/components/modals/MuonAdamModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/OffloadingModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/OptimizerParamsModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/ProfilingPanel.tsx
 create mode 100644 web/gui/src/renderer/components/modals/SampleParamsModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/SavePresetModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/SchedulerParamsModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/TimestepDistModal.tsx
 create mode 100644 web/gui/src/renderer/components/modals/VideoToolModal.tsx
 create mode 100644 web/gui/src/renderer/components/sampling/SampleCard.tsx
 create mode 100644 web/gui/src/renderer/components/sampling/SampleList.tsx
 create mode 100644 web/gui/src/renderer/components/schema/SchemaModal.tsx
 create mode 100644 web/gui/src/renderer/components/schema/SchemaTabRenderer.tsx
 create mode 100644 web/gui/src/renderer/components/shared/ArrayItemHeader.tsx
 create mode 100644 web/gui/src/renderer/components/shared/Button.tsx
 create mode 100644 web/gui/src/renderer/components/shared/Card.tsx
 create mode 100644 web/gui/src/renderer/components/shared/DirPicker.tsx
 create mode 100644 web/gui/src/renderer/components/shared/DualProgress.tsx
 create mode 100644 web/gui/src/renderer/components/shared/EmptyState.tsx
 create mode 100644 web/gui/src/renderer/components/shared/FilePicker.tsx
 create mode 100644 web/gui/src/renderer/components/shared/FormEntry.tsx
 create mode 100644 web/gui/src/renderer/components/shared/FormFieldWrapper.tsx
 create mode 100644 web/gui/src/renderer/components/shared/IconButton.tsx
 create mode 100644 web/gui/src/renderer/components/shared/LayerFilterEntry.tsx
 create mode 100644 web/gui/src/renderer/components/shared/PathPicker.tsx
 create mode 100644 web/gui/src/renderer/components/shared/ProgressBar.tsx
 create mode 100644 web/gui/src/renderer/components/shared/ScalarChart.tsx
 create mode 100644 web/gui/src/renderer/components/shared/SchemaField.tsx
 create mode 100644 web/gui/src/renderer/components/shared/SectionCard.tsx
 create mode 100644 web/gui/src/renderer/components/shared/Select.tsx
 create mode 100644 web/gui/src/renderer/components/shared/Skeleton.tsx
 create mode 100644 web/gui/src/renderer/components/shared/SliderEntry.tsx
 create mode 100644 web/gui/src/renderer/components/shared/TimeEntry.tsx
 create mode 100644 web/gui/src/renderer/components/shared/Toggle.tsx
 create mode 100644 web/gui/src/renderer/components/shared/Tooltip.tsx
 create mode 100644 web/gui/src/renderer/components/shared/index.ts
 create mode 100644 web/gui/src/renderer/hooks/useArrayField.ts
 create mode 100644 web/gui/src/renderer/hooks/useConfigField.ts
 create mode 100644 web/gui/src/renderer/hooks/useElapsedTime.ts
 create mode 100644 web/gui/src/renderer/hooks/useMaskEditor.ts
 create mode 100644 web/gui/src/renderer/hooks/useReconnectingWebSocket.ts
 create mode 100644 web/gui/src/renderer/hooks/useTerminalWebSocket.ts
 create mode 100644 web/gui/src/renderer/hooks/useToolPolling.ts
 create mode 100644 web/gui/src/renderer/hooks/useTrainingWebSocket.ts
 create mode 100644 web/gui/src/renderer/main.tsx
 create mode 100644 web/gui/src/renderer/pages/ConceptsPage.tsx
 create mode 100644 web/gui/src/renderer/pages/EmbeddingsPage.tsx
 create mode 100644 web/gui/src/renderer/pages/HelpPage.tsx
 create mode 100644 web/gui/src/renderer/pages/MaskEditorPage.tsx
 create mode 100644 web/gui/src/renderer/pages/PerformancePage.tsx
 create mode 100644 web/gui/src/renderer/pages/RunPage.tsx
 create mode 100644 web/gui/src/renderer/pages/SamplingPage.tsx
 create mode 100644 web/gui/src/renderer/pages/ToolsPage.tsx
 create mode 100644 web/gui/src/renderer/store/configStore.ts
 create mode 100644 web/gui/src/renderer/store/trainingStore.ts
 create mode 100644 web/gui/src/renderer/store/uiSchemaStore.ts
 create mode 100644 web/gui/src/renderer/store/uiStore.ts
 create mode 100644 web/gui/src/renderer/styles/app.css
 create mode 100644 web/gui/src/renderer/styles/globals.css
 create mode 100644 web/gui/src/renderer/styles/theme.ts
 create mode 100644 web/gui/src/renderer/types/electron.d.ts
 create mode 100644 web/gui/src/renderer/types/uiSchema.ts
 create mode 100644 web/gui/src/renderer/utils/chartUtils.ts
 create mode 100644 web/gui/src/renderer/utils/conditionEval.ts
 create mode 100644 web/gui/src/renderer/utils/enumLabels.ts
 create mode 100644 web/gui/src/renderer/utils/formatDuration.ts
 create mode 100644 web/gui/src/renderer/utils/inputStyles.ts
 create mode 100644 web/gui/src/renderer/utils/markdown.ts
 create mode 100644 web/gui/src/renderer/utils/timestepDistribution.ts
 create mode 100644 web/gui/src/renderer/utils/tooltips.ts
 create mode 100644 web/gui/src/renderer/vite-env.d.ts
 create mode 100644 web/gui/src/shared/brandColors.ts
 create mode 100644 web/gui/src/shared/electron-api.ts
 create mode 100644 web/gui/src/shared/ipc-channels.ts
 create mode 100644 web/gui/tsconfig.json
 create mode 100644 web/gui/tsconfig.main.json
 create mode 100644 web/gui/vite.config.ts
 create mode 100644 web/scripts/check_hardcoded_options.py
 create mode 100644 web/scripts/generate_types.py
 create mode 100644 web/scripts/generate_ui_schema.py
 create mode 100644 web/scripts/run_eslint.py
 create mode 100644 web/scripts/run_generate_types.js
 create mode 100644 web/scripts/ui_metadata.py
 create mode 100644 web/scripts/ui_parser.py

diff --git a/.github/workflows/web-ui-lint.yml b/.github/workflows/web-ui-lint.yml
new file mode 100644
index 000000000..298843ff5
--- /dev/null
+++ b/.github/workflows/web-ui-lint.yml
@@ -0,0 +1,26 @@
+name: web-ui-lint
+
+on:
+  pull_request:
+    paths:
+      - "web/gui/**"
+      - ".github/workflows/web-ui-lint.yml"
+  push:
+    branches: [master, Webui]
+    paths:
+      - "web/gui/**"
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: web/gui
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - run: npm install --no-audit --no-fund
+      - run: npm run lint
+      - run: npm run format:check
diff --git a/.gitignore b/.gitignore
index 0b3e5887d..638b20725 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,6 +20,8 @@ debug*.py
 config.json
 secrets.json
 *.zip
+.env*
+!.env.example
 
 # environments
 /.venv*
@@ -38,3 +40,14 @@ pixi.toml
 train.bat
 debug_report.log
 config_diff.txt
+
+# Web UI
+web/gui/dist/
+web/gui/release/
+web/gui/node_modules/
+web/gui/public/ui-schema.json
+web/gui/src/renderer/types/generated/
+web/gui/.vite-port
+web/backend/__pycache__/
+web/backend/**/__pycache__/
+web/backend/generated/
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 2d09dac87..affd20fb6 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -16,10 +16,25 @@ repos:
 - repo: https://github.com/astral-sh/ruff-pre-commit
   rev: v0.15.17
   hooks:
-    # Run the Ruff linter, but not the formatter.
     - id: ruff
       args: ["--fix"]
       types_or: [ python, pyi, jupyter ]
 
+- repo: local
+  hooks:
+    - id: eslint
+      name: ESLint (frontend)
+      entry: python -m web.scripts.run_eslint
+      language: system
+      files: '^web/gui/.*\.(ts|tsx)$'
+      pass_filenames: false
+
+    - id: check-hardcoded-dropdown-options
+      name: No hardcoded <Select options> outside types/generated/
+      entry: python -m web.scripts.check_hardcoded_options
+      language: system
+      files: '^web/gui/src/renderer/.*\.(ts|tsx)$'
+      pass_filenames: false
+
 ci:
   autofix_prs: false
diff --git a/install.bat b/install.bat
index cf04082d9..c9efd524d 100644
--- a/install.bat
+++ b/install.bat
@@ -273,6 +273,38 @@ if errorlevel 1 (
     echo %GRN%CUDA is available.%RESET%
 )
 
+rem 7) Generate UI schema and build web UI
+echo.
+echo %CYAN%Generating UI schema...%RESET%
+python -m web.scripts.generate_ui_schema
+if errorlevel 1 (
+  echo %YEL%WARNING: UI schema generation failed. Using existing schema.%RESET%
+)
+
+echo.
+where node >NUL 2>NUL
+if errorlevel 1 (
+  echo %YEL%Node.js not found. Skipping web UI build.%RESET%
+  echo To use the web UI, install Node.js from https://nodejs.org/ and re-run install.bat
+) else (
+  echo %CYAN%Building web UI...%RESET%
+  pushd web\gui
+  call npm install
+  if errorlevel 1 (
+    echo %YEL%WARNING: npm install failed. Web UI will not be available.%RESET%
+    popd
+    goto :skip_web_build
+  )
+  call npm run build:electron
+  if errorlevel 1 (
+    echo %YEL%WARNING: Web UI build failed. Web UI will not be available.%RESET%
+  ) else (
+    echo %GRN%Web UI built successfully.%RESET%
+  )
+  popd
+)
+:skip_web_build
+
 echo.
 echo %GRN%**** Install successful^^! ****%RESET%
 echo.
diff --git a/lib.include.sh b/lib.include.sh
index ed6d31a23..dfb7721a0 100644
--- a/lib.include.sh
+++ b/lib.include.sh
@@ -444,4 +444,39 @@ function prepare_runtime_environment {
     else
         install_requirements_in_active_env_if_necessary
     fi
+
+    # Regenerate the web UI schema and rebuild the Electron bundle when possible.
+    print "Generating UI schema..."
+    if ! run_python_in_active_env -m web.scripts.generate_ui_schema; then
+        print_warning "UI schema generation failed. Using existing schema."
+    fi
+
+    build_web_ui_if_available
+}
+
+# Builds the Electron+React web UI when Node.js is available.
+# During "install" runs it builds unconditionally; otherwise only rebuilds
+# when a previously built bundle is detected, so regular headless users
+# are not forced to install Node.js.
+function build_web_ui_if_available {
+    if ! command -v node &> /dev/null; then
+        print "Node.js not found. Skipping web UI build."
+        print "To use the web UI, install Node.js from https://nodejs.org/"
+        return 0
+    fi
+
+    local gui_dir="${SCRIPT_DIR}/web/gui"
+    local dist_marker="${gui_dir}/dist/main/main/index.cjs"
+
+    if [[ -f "${dist_marker}" ]] || [[ "${1:-}" == "install" ]]; then
+        print "Building web UI..."
+        (
+            cd "${gui_dir}"
+            npm install || { print_warning "npm install failed. Web UI may be stale."; return 0; }
+            npm run build:electron || { print_warning "Web UI build failed. Web UI may be stale."; return 0; }
+            print "Web UI built successfully."
+        )
+    else
+        print "Web UI not previously built. Run start-web-ui.sh to build and launch."
+    fi
 }
diff --git a/start-web-ui.bat b/start-web-ui.bat
new file mode 100644
index 000000000..2b875f96e
--- /dev/null
+++ b/start-web-ui.bat
@@ -0,0 +1,80 @@
+@echo off
+cd /d "%~dp0"
+
+set "OT_DEV="
+for %%a in (%*) do (
+    if "%%a"=="--dev" set "OT_DEV=1"
+)
+
+if not exist "scripts\train_ui.py" (
+    echo Error: train_ui.py does not exist, you have done something very wrong. Reclone the repository.
+    goto :end
+)
+
+if not defined PYTHON (
+    where python >NUL 2>NUL
+    if errorlevel 1 (
+        echo Error: Python is not installed or not in PATH
+        goto :end
+    )
+    set PYTHON=python
+)
+if not defined VENV_DIR (set "VENV_DIR=%~dp0venv")
+
+:check_venv
+dir "%VENV_DIR%" > NUL 2> NUL
+if not errorlevel 1 goto :activate_venv
+echo venv not found, please run install.bat first
+goto :end
+
+:activate_venv
+echo activating venv %VENV_DIR%
+if not exist "%VENV_DIR%\Scripts\python.exe" (
+    echo Error: Python executable not found in virtual environment
+    goto :end
+)
+set PYTHON="%VENV_DIR%\Scripts\python.exe" -X utf8
+echo Using Python %PYTHON%
+
+REM Disable Xet (buggy) - https://github.com/Nerogar/OneTrainer/issues/949
+if not defined HF_HUB_DISABLE_XET (
+    set "HF_HUB_DISABLE_XET=1"
+)
+
+:check_python_version
+%PYTHON% --version
+if errorlevel 1 (
+    echo Error: Failed to get Python version
+    goto :end
+)
+%PYTHON% "%~dp0scripts\util\version_check.py" 3.10 3.14 2>&1
+if errorlevel 1 (
+    goto :end
+)
+
+:check_node
+where node >NUL 2>NUL
+if errorlevel 1 (
+    echo Error: Node.js is not installed or not in PATH
+    echo Please install Node.js from https://nodejs.org/
+    goto :end
+)
+
+:check_gui_built
+if not exist "web\gui\dist\main\main\index.cjs" (
+    echo Error: Web GUI has not been built yet.
+    echo Please run install.bat or update.bat first to build the web UI.
+    goto :end
+)
+
+:launch
+echo Starting OneTrainer Web UI...
+cd web\gui
+call npx electron .
+cd ..\..
+if errorlevel 1 (
+    echo Error: Web UI exited with code %ERRORLEVEL%
+)
+
+:end
+pause
diff --git a/start-web-ui.sh b/start-web-ui.sh
new file mode 100644
index 000000000..273ffc37c
--- /dev/null
+++ b/start-web-ui.sh
@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+
+set -e
+
+source "${BASH_SOURCE[0]%/*}/lib.include.sh"
+
+for arg in "$@"; do
+    if [[ "$arg" == "--dev" ]]; then
+        export OT_DEV=1
+    fi
+done
+
+# Xet is buggy - https://github.com/Nerogar/OneTrainer/issues/949
+if [[ -z "${HF_HUB_DISABLE_XET+x}" ]]; then
+    export HF_HUB_DISABLE_XET=1
+fi
+
+prepare_runtime_environment
+
+if ! command -v node &> /dev/null; then
+    echo "Error: Node.js is not installed or not in PATH"
+    echo "Please install Node.js from https://nodejs.org/"
+    exit 1
+fi
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+if [[ ! -f "$SCRIPT_DIR/web/gui/dist/main/main/index.cjs" ]]; then
+    echo "Error: Web GUI has not been built yet."
+    echo "Please run install.sh or update.sh first to build the web UI."
+    exit 1
+fi
+
+echo "Starting OneTrainer Web UI..."
+cd "$SCRIPT_DIR/web/gui"
+npx electron .
diff --git a/update.bat b/update.bat
index 7d05c4810..a50744128 100644
--- a/update.bat
+++ b/update.bat
@@ -141,6 +141,41 @@ if errorlevel 1 (
     goto :end_error
 )
 
+REM Regenerate UI schema and rebuild web UI if previously built
+echo.
+echo Generating UI schema...
+"%PYTHON%" -m web.scripts.generate_ui_schema
+if errorlevel 1 (
+  echo WARNING: UI schema generation failed. Using existing schema.
+)
+REM Reset errorlevel so schema failure does not affect exit code
+cmd /c "exit /b 0"
+
+where node >NUL 2>NUL
+if errorlevel 1 (
+  echo Node.js not found. Skipping web UI rebuild.
+) else (
+  if exist "web\gui\dist\main\main\index.cjs" (
+    echo Rebuilding web UI...
+    pushd web\gui
+    call npm install
+    if errorlevel 1 (
+      echo WARNING: npm install failed. Web UI may be stale.
+      popd
+      goto :end_success
+    )
+    call npm run build:electron
+    if errorlevel 1 (
+      echo WARNING: Web UI rebuild failed. Web UI may be stale.
+    ) else (
+      echo Web UI rebuilt successfully.
+    )
+    popd
+  ) else (
+    echo Web UI not previously built. Run start-web-ui.bat to launch.
+  )
+)
+
 :end_success
 echo.
 echo ***********
diff --git a/web/backend/main.py b/web/backend/main.py
new file mode 100644
index 000000000..4996493b2
--- /dev/null
+++ b/web/backend/main.py
@@ -0,0 +1,89 @@
+import logging
+import os
+import sys
+from contextlib import asynccontextmanager
+
+from web.backend.paths import PROJECT_ROOT
+
+logger = logging.getLogger(__name__)
+
+sys.path.insert(0, PROJECT_ROOT)
+
+from web.backend.routers import (
+    concepts,
+    config,
+    converter,
+    health,
+    mask_editor,
+    presets,
+    samples,
+    sampling,
+    secrets,
+    system,
+    tensorboard,
+    tools,
+    training,
+    video_tools,
+    wiki,
+)
+from web.backend.ws import system_ws, terminal_ws, training_ws
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    from web.backend.services.log_service import LogService
+
+    LogService.get_instance().install()
+    yield
+
+
+app = FastAPI(
+    title="OneTrainerWeb API",
+    version="0.1.0",
+    lifespan=lifespan,
+)
+
+_default_origins = [
+    "http://localhost:5173",
+    "http://127.0.0.1:5173",
+    "http://localhost:8000",
+    "http://127.0.0.1:8000",
+]
+if os.environ.get("OT_ELECTRON") == "1":
+    _default_origins.append("null")
+_cors_origins = os.environ.get("OT_CORS_ORIGINS", "").split(",") if os.environ.get("OT_CORS_ORIGINS") else _default_origins
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=_cors_origins,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+_routers = [
+    health.router,
+    config.router,
+    presets.router,
+    concepts.router,
+    samples.router,
+    secrets.router,
+    tensorboard.router,
+    training.router,
+    wiki.router,
+    system.router,
+    tools.router,
+    converter.router,
+    video_tools.router,
+    sampling.router,
+    mask_editor.router,
+    tools.debug_router,
+]
+for _router in _routers:
+    app.include_router(_router, prefix="/api")
+
+app.include_router(training_ws.router)
+app.include_router(system_ws.router)
+app.include_router(terminal_ws.router)
diff --git a/web/backend/models/__init__.py b/web/backend/models/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/backend/paths.py b/web/backend/paths.py
new file mode 100644
index 000000000..76922bfd1
--- /dev/null
+++ b/web/backend/paths.py
@@ -0,0 +1,6 @@
+import os
+
+PROJECT_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", ".."))
+PRESETS_DIR = os.path.join(PROJECT_ROOT, "training_presets")
+CONCEPTS_DIR = os.path.join(PROJECT_ROOT, "training_concepts")
+SECRETS_PATH = os.path.join(PROJECT_ROOT, "secrets.json")
diff --git a/web/backend/requirements.txt b/web/backend/requirements.txt
new file mode 100644
index 000000000..4b041da8d
--- /dev/null
+++ b/web/backend/requirements.txt
@@ -0,0 +1,9 @@
+# Requires Python >= 3.10
+# Install: pip install -r requirements.txt
+
+fastapi>=0.115.0
+uvicorn[standard]>=0.34.0
+websockets>=14.0
+pydantic>=2.10.0
+pynvml>=12.0.0
+psutil>=6.0.0
diff --git a/web/backend/routers/__init__.py b/web/backend/routers/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/backend/routers/concepts.py b/web/backend/routers/concepts.py
new file mode 100644
index 000000000..b562e6be3
--- /dev/null
+++ b/web/backend/routers/concepts.py
@@ -0,0 +1,463 @@
+import contextlib
+import json
+import os
+import random
+import threading
+import time
+import uuid
+from collections import OrderedDict
+
+from web.backend.paths import CONCEPTS_DIR
+from web.backend.services.concept_service import ConceptService
+from web.backend.services.config_service import ConfigService
+from web.backend.utils.path_security import validate_path
+
+from fastapi import APIRouter, HTTPException, Query
+from fastapi.responses import FileResponse, JSONResponse
+from pydantic import BaseModel, Field
+
+router = APIRouter(prefix="/concepts", tags=["concepts"])
+
+_IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".webp", ".bmp", ".tif", ".tiff", ".avif"}
+
+_THUMBNAIL_CACHE_MAXSIZE = 256
+_THUMBNAIL_CACHE_TTL = 60
+_thumbnail_cache: OrderedDict[str, tuple[float, str | None]] = OrderedDict()
+_thumbnail_cache_lock = threading.Lock()
+
+
+def _is_valid_image(name: str) -> bool:
+    ext = os.path.splitext(name)[1].lower()
+    return ext in _IMAGE_EXTENSIONS and not name.endswith("-masklabel.png") and not name.endswith("-condlabel.png")
+
+
+def _pick_thumbnail(dir_path: str, include_subdirectories: bool = False) -> str | None:
+    cache_key = f"{dir_path}|{include_subdirectories}"
+    now = time.monotonic()
+
+    with _thumbnail_cache_lock:
+        if cache_key in _thumbnail_cache:
+            ts, value = _thumbnail_cache[cache_key]
+            if now - ts < _THUMBNAIL_CACHE_TTL:
+                _thumbnail_cache.move_to_end(cache_key)
+                return value
+            else:
+                del _thumbnail_cache[cache_key]
+
+    if not os.path.isdir(dir_path):
+        result = None
+    else:
+        candidates: list[str] = []
+        try:
+            if include_subdirectories:
+                for root, dirs, files in os.walk(dir_path):
+                    # Skip hidden directories
+                    dirs[:] = [d for d in dirs if not d.startswith('.')]
+                    candidates.extend(os.path.join(root, fname) for fname in files if _is_valid_image(fname))
+            else:
+                candidates.extend(
+                    entry.path for entry in os.scandir(dir_path) if entry.is_file() and _is_valid_image(entry.name)
+                )
+        except PermissionError:
+            result = None
+        else:
+            result = random.choice(candidates) if candidates else None
+
+    with _thumbnail_cache_lock:
+        _thumbnail_cache[cache_key] = (now, result)
+        _thumbnail_cache.move_to_end(cache_key)
+        while len(_thumbnail_cache) > _THUMBNAIL_CACHE_MAXSIZE:
+            _thumbnail_cache.popitem(last=False)
+
+    return result
+
+
+def invalidate_thumbnail_cache() -> None:
+    with _thumbnail_cache_lock:
+        _thumbnail_cache.clear()
+
+
+@router.get("/thumbnail")
+def get_thumbnail(
+    path: str = Query(..., description="Directory path to scan for images"),
+    include_subdirectories: bool = Query(False, description="Include images from subdirectories"),
+):
+    path = validate_path(path, allow_file=False)
+    chosen = _pick_thumbnail(path, include_subdirectories)
+    if chosen is None:
+        raise HTTPException(status_code=404, detail="No images found in directory")
+
+    return FileResponse(chosen, media_type="image/*")
+
+
+@router.get("/images")
+def list_images(
+    path: str = Query(..., description="Directory path to scan for images"),
+    offset: int = Query(0, ge=0, description="Start index"),
+    limit: int = Query(50, ge=1, le=10000, description="Max images to return"),
+    include_subdirectories: bool = Query(False, description="Include images from subdirectories"),
+):
+    path = validate_path(path, allow_file=False)
+
+    entries: list[dict] = []
+    try:
+        if include_subdirectories:
+            for root, dirs, files in os.walk(path):
+                # Skip hidden directories
+                dirs[:] = sorted(d for d in dirs if not d.startswith('.'))
+                for fname in sorted(files):
+                    if _is_valid_image(fname):
+                        full_path = os.path.join(root, fname)
+                        stem = os.path.splitext(full_path)[0]
+                        caption_path = stem + ".txt"
+                        caption: str | None = None
+                        if os.path.isfile(caption_path):
+                            try:
+                                with open(caption_path, "r", encoding="utf-8") as fh:
+                                    caption = fh.read().strip()
+                            except Exception:
+                                caption = None
+                        entries.append({
+                            "filename": fname,
+                            "path": full_path.replace("\\", "/"),
+                            "caption": caption,
+                        })
+        else:
+            for entry in sorted(os.scandir(path), key=lambda e: e.name):
+                if entry.is_file() and _is_valid_image(entry.name):
+                    stem = os.path.splitext(entry.path)[0]
+                    caption_path = stem + ".txt"
+                    caption: str | None = None
+                    if os.path.isfile(caption_path):
+                        try:
+                            with open(caption_path, "r", encoding="utf-8") as fh:
+                                caption = fh.read().strip()
+                        except Exception:
+                            caption = None
+                    entries.append({
+                        "filename": entry.name,
+                        "path": entry.path.replace("\\", "/"),
+                        "caption": caption,
+                    })
+    except PermissionError as err:
+        raise HTTPException(status_code=403, detail="Permission denied") from err
+
+    total = len(entries)
+    page = entries[offset:offset + limit]
+
+    return JSONResponse({"total": total, "offset": offset, "images": page})
+
+
+@router.get("/image")
+def get_image(path: str = Query(..., description="Full path to an image file")):
+    path = validate_path(path, allow_dir=False)
+
+    ext = os.path.splitext(path)[1].lower()
+    if ext not in _IMAGE_EXTENSIONS:
+        raise HTTPException(status_code=400, detail="Not a supported image file")
+
+    return FileResponse(path, media_type="image/*")
+
+
+@router.get("/text-file")
+def get_text_file(path: str = Query(..., description="Path to a text file")):
+    path = validate_path(path, allow_dir=False)
+
+    ext = os.path.splitext(path)[1].lower()
+    if ext not in {".txt", ".caption", ".csv"}:
+        raise HTTPException(status_code=400, detail="Not a supported text file")
+
+    try:
+        with open(path, "r", encoding="utf-8") as fh:
+            content = fh.read()
+        return JSONResponse({"content": content})
+    except PermissionError as exc:
+        raise HTTPException(status_code=403, detail="Permission denied") from exc
+    except UnicodeDecodeError as exc:
+        raise HTTPException(status_code=400, detail="Invalid file encoding") from exc
+
+
+@router.get("/configs")
+def list_concept_configs() -> list[dict]:
+    configs: list[dict] = []
+    if os.path.isdir(CONCEPTS_DIR):
+        for entry in sorted(os.listdir(CONCEPTS_DIR)):
+            if entry.endswith(".json") and os.path.isfile(os.path.join(CONCEPTS_DIR, entry)):
+                name = os.path.splitext(entry)[0]
+                rel_path = f"training_concepts/{entry}"
+                configs.append({"name": name, "path": rel_path})
+    return configs
+
+
+class CreateConfigRequest(BaseModel):
+    name: str = Field(max_length=200)
+
+
+@router.post("/configs")
+def create_concept_config(req: CreateConfigRequest) -> dict:
+    safe_name = "".join(c for c in req.name if c.isalnum() or c in " _-").strip()
+    if not safe_name:
+        raise HTTPException(status_code=400, detail="Invalid config name")
+
+    os.makedirs(CONCEPTS_DIR, exist_ok=True)
+    file_path = os.path.join(CONCEPTS_DIR, f"{safe_name}.json")
+    rel_path = f"training_concepts/{safe_name}.json"
+
+    if os.path.exists(file_path):
+        raise HTTPException(status_code=409, detail=f"Config '{safe_name}' already exists")
+
+    with open(file_path, "w", encoding="utf-8") as f:
+        json.dump([], f)
+
+    return {"name": safe_name, "path": rel_path}
+
+
+def _resolve_concept_path(path: str | None) -> str:
+    if path:
+        # Concept files live under the project; restrict to JSON files via the
+        # standard path validator to keep the override flow sandboxed.
+        return validate_path(path, allow_file=True)
+    service = ConfigService.get_instance()
+    concept_path = service.config.concept_file_name
+    if not concept_path:
+        raise HTTPException(status_code=422, detail="No concept_file_name configured")
+    return concept_path
+
+
+@router.get("")
+def get_concepts(
+    path: str | None = Query(
+        None,
+        description="Override the concept file path; defaults to the global config value.",
+    ),
+) -> list[dict]:
+    concept_path = _resolve_concept_path(path)
+    concept_service = ConceptService()
+    try:
+        return concept_service.load_concepts(concept_path)
+    except FileNotFoundError as exc:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Concept file not found: {concept_path}",
+        ) from exc
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+
+
+@router.put("")
+def save_concepts(
+    concepts: list[dict],
+    path: str | None = Query(
+        None,
+        description="Override the concept file path; defaults to the global config value.",
+    ),
+) -> dict:
+    concept_path = _resolve_concept_path(path)
+    concept_service = ConceptService()
+    try:
+        concept_service.save_concepts(concept_path, concepts)
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+    invalidate_thumbnail_cache()
+
+    return {"saved": len(concepts), "path": concept_path}
+
+
+_active_scans: dict[str, threading.Event] = {}
+_active_scans_lock = threading.Lock()
+
+
+class StatsRequest(BaseModel):
+    path: str
+    include_subdirectories: bool = False
+    advanced: bool = False
+
+
+@router.post("/stats")
+def scan_concept_stats(req: StatsRequest):
+    req.path = validate_path(req.path, allow_file=False)
+
+    try:
+        from modules.util import concept_stats
+        from modules.util.config.ConceptConfig import ConceptConfig
+    except ImportError as exc:
+        raise HTTPException(
+            status_code=503,
+            detail=f"Backend modules not available: {exc}",
+        ) from exc
+
+    scan_id = uuid.uuid4().hex
+    cancel_flag = threading.Event()
+    with _active_scans_lock:
+        _active_scans[scan_id] = cancel_flag
+
+    try:
+        start_time = time.perf_counter()
+        max_scan_seconds = 120
+
+        concept_config = ConceptConfig.default_values()
+        concept_config.path = req.path
+        concept_config.include_subdirectories = req.include_subdirectories
+
+        stats_dict = concept_stats.init_concept_stats(req.advanced)
+
+        subfolders = [req.path]
+
+        for folder in subfolders:
+            if cancel_flag.is_set():
+                break
+            if time.perf_counter() - start_time > max_scan_seconds:
+                stats_dict["force_cancelled"] = True
+                break
+            stats_dict = concept_stats.folder_scan(
+                folder, stats_dict, req.advanced, concept_config,
+                start_time, max_scan_seconds, cancel_flag,
+            )
+            if req.include_subdirectories and not cancel_flag.is_set():
+                with contextlib.suppress(PermissionError):
+                    subfolders.extend(
+                        entry.path for entry in os.scandir(folder) if entry.is_dir()
+                    )
+
+        stats_dict["processing_time"] = round(time.perf_counter() - start_time, 3)
+        stats_dict["scan_id"] = scan_id
+
+        return JSONResponse(stats_dict)
+    finally:
+        with _active_scans_lock:
+            _active_scans.pop(scan_id, None)
+
+
+@router.delete("/stats/cancel")
+def cancel_concept_stats(scan_id: str = Query("", description="Scan ID to cancel; empty cancels all active scans")):
+    with _active_scans_lock:
+        if scan_id:
+            flag = _active_scans.get(scan_id)
+            if flag is None:
+                raise HTTPException(status_code=404, detail=f"No active scan with id: {scan_id}")
+            flag.set()
+            return {"cancelled": True, "scan_id": scan_id}
+        else:
+            cancelled_ids = list(_active_scans.keys())
+            for flag in _active_scans.values():
+                flag.set()
+            return {"cancelled": True, "scan_ids": cancelled_ids}
+
+
+# ---- Caption save ----
+
+
+class SaveCaptionRequest(BaseModel):
+    image_path: str
+    caption: str
+
+
+@router.post("/save-caption")
+def save_caption(req: SaveCaptionRequest):
+    """Write a .txt caption file next to the given image."""
+    safe = validate_path(req.image_path, must_exist=True, allow_dir=False)
+    base, _ = os.path.splitext(safe)
+    caption_path = base + ".txt"
+    try:
+        with open(caption_path, "w", encoding="utf-8") as fh:
+            fh.write(req.caption)
+        return {"ok": True, "saved": caption_path}
+    except OSError as exc:
+        raise HTTPException(status_code=500, detail=f"Failed to write caption: {exc}") from exc
+
+
+# ---- Augmentation preview ----
+
+
+class AugPreviewRequest(BaseModel):
+    image_path: str
+    image: dict  # ConceptImageConfig as plain dict
+    seed: int = Field(default_factory=lambda: random.randint(0, 2**30))
+
+
+def _apply_image_augmentations(img, image_cfg: dict, rng: random.Random):
+    """Lightweight PIL approximation of the per-concept image augmentations.
+
+    Mirrors the most common operations from mgds (RandomBrightness/Contrast/
+    Saturation/Hue/Flip/Rotate) but stays self-contained for fast preview.
+    """
+    from PIL import ImageEnhance, ImageOps
+
+    def _strength(enable_random: str, enable_fixed: str, max_strength: float) -> float:
+        if image_cfg.get(enable_random):
+            return rng.uniform(-max_strength, max_strength)
+        if image_cfg.get(enable_fixed):
+            return max_strength
+        return 0.0
+
+    if image_cfg.get("enable_random_flip") and rng.random() < 0.5 or image_cfg.get("enable_fixed_flip"):
+        img = ImageOps.mirror(img)
+
+    if image_cfg.get("enable_random_rotate") or image_cfg.get("enable_fixed_rotate"):
+        max_angle = float(image_cfg.get("random_rotate_max_angle", 0) or 0)
+        if max_angle > 0:
+            angle = rng.uniform(-max_angle, max_angle) if image_cfg.get("enable_random_rotate") else max_angle
+            img = img.rotate(angle, resample=2, expand=False)  # 2 = BILINEAR
+
+    s = _strength(
+        "enable_random_brightness",
+        "enable_fixed_brightness",
+        float(image_cfg.get("random_brightness_max_strength", 0) or 0),
+    )
+    if s != 0.0:
+        img = ImageEnhance.Brightness(img.convert("RGB")).enhance(1.0 + s)
+
+    s = _strength(
+        "enable_random_contrast",
+        "enable_fixed_contrast",
+        float(image_cfg.get("random_contrast_max_strength", 0) or 0),
+    )
+    if s != 0.0:
+        img = ImageEnhance.Contrast(img.convert("RGB")).enhance(1.0 + s)
+
+    s = _strength(
+        "enable_random_saturation",
+        "enable_fixed_saturation",
+        float(image_cfg.get("random_saturation_max_strength", 0) or 0),
+    )
+    if s != 0.0:
+        img = ImageEnhance.Color(img.convert("RGB")).enhance(1.0 + s)
+
+    s = _strength(
+        "enable_random_hue",
+        "enable_fixed_hue",
+        float(image_cfg.get("random_hue_max_strength", 0) or 0),
+    )
+    if s != 0.0:
+        from PIL import Image as _Image
+
+        hsv = img.convert("HSV")
+        h, sat, v = hsv.split()
+        h = h.point(lambda px: int((px + s * 128) % 256))
+        img = _Image.merge("HSV", (h, sat, v)).convert("RGB")
+
+    return img
+
+
+@router.post("/augmentation-preview")
+def augmentation_preview(req: AugPreviewRequest):
+    """Apply augmentations to a single image and return the result as base64 PNG."""
+    import base64
+    import io
+
+    from PIL import Image
+
+    safe_path = validate_path(req.image_path, must_exist=True, allow_dir=False)
+    rng = random.Random(req.seed)
+
+    try:
+        with Image.open(safe_path) as src:
+            src.load()
+            preview = _apply_image_augmentations(src.convert("RGB"), req.image, rng)
+
+        buf = io.BytesIO()
+        preview.save(buf, format="PNG")
+        encoded = base64.b64encode(buf.getvalue()).decode("ascii")
+        return {"ok": True, "image_base64": encoded, "seed": req.seed}
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Augmentation preview failed: {exc}") from exc
diff --git a/web/backend/routers/config.py b/web/backend/routers/config.py
new file mode 100644
index 000000000..52868d127
--- /dev/null
+++ b/web/backend/routers/config.py
@@ -0,0 +1,140 @@
+import json
+import os
+
+from web.backend.routers.concepts import invalidate_thumbnail_cache
+from web.backend.services.config_service import ConfigService
+
+from fastapi import APIRouter, HTTPException, Request
+from pydantic import BaseModel
+
+_OPTIMIZER_DEFAULTS_PATH = os.path.join(os.path.dirname(__file__), "..", "generated", "optimizer_defaults.json")
+_optimizer_defaults_cache: dict | None = None
+
+
+def _load_optimizer_defaults() -> dict:
+    global _optimizer_defaults_cache
+    if _optimizer_defaults_cache is None:
+        with open(_OPTIMIZER_DEFAULTS_PATH, encoding="utf-8") as f:
+            _optimizer_defaults_cache = json.load(f)
+    return _optimizer_defaults_cache
+
+
+_OPTIMIZER_KEY_DETAILS_PATH = os.path.join(os.path.dirname(__file__), "..", "generated", "optimizer_key_details.json")
+_optimizer_key_details_cache: dict | None = None
+
+
+def _load_key_detail_map() -> dict:
+    global _optimizer_key_details_cache
+    if _optimizer_key_details_cache is None:
+        with open(_OPTIMIZER_KEY_DETAILS_PATH, encoding="utf-8") as f:
+            _optimizer_key_details_cache = json.load(f)
+    return _optimizer_key_details_cache
+
+
+router = APIRouter(prefix="/config", tags=["config"])
+
+
+@router.get("")
+def get_config() -> dict:
+    service = ConfigService.get_instance()
+    return service.get_config_dict()
+
+
+@router.put("")
+async def update_config(request: Request) -> dict:
+    service = ConfigService.get_instance()
+    data = await request.json()
+    if not isinstance(data, dict):
+        raise HTTPException(status_code=422, detail="Request body must be a JSON object")
+
+    if "concept_file_name" in data:
+        old_value = getattr(service.config, "concept_file_name", None)
+        if data["concept_file_name"] != old_value:
+            invalidate_thumbnail_cache()
+
+    try:
+        return service.update_config(data)
+    except Exception as exc:
+        raise HTTPException(status_code=422, detail=str(exc)) from exc
+
+
+@router.post("/validate")
+async def validate_config(request: Request) -> dict:
+    service = ConfigService.get_instance()
+    data = await request.json()
+    if not isinstance(data, dict):
+        raise HTTPException(status_code=422, detail="Request body must be a JSON object")
+    return service.validate_config(data)
+
+
+@router.get("/defaults")
+def get_defaults() -> dict:
+    service = ConfigService.get_instance()
+    return service.get_defaults()
+
+
+@router.get("/schema")
+def get_schema() -> dict:
+    service = ConfigService.get_instance()
+    config = service.config
+
+    fields: dict[str, dict] = {}
+    for name, var_type in config.types.items():
+        type_name = getattr(var_type, "__name__", str(var_type))
+        fields[name] = {
+            "type": type_name,
+            "nullable": config.nullables.get(name, False),
+        }
+
+    return {"fields": fields}
+
+
+class ChangeOptimizerRequest(BaseModel):
+    optimizer: str
+
+
+@router.post("/change-optimizer")
+def change_optimizer_endpoint(body: ChangeOptimizerRequest) -> dict:
+    service = ConfigService.get_instance()
+    try:
+        return service.change_optimizer(body.optimizer)
+    except KeyError as exc:
+        raise HTTPException(status_code=422, detail=f"Unknown optimizer: {body.optimizer}") from exc
+
+
+@router.get("/optimizer-params")
+def get_optimizer_params() -> dict:
+    all_defaults = _load_optimizer_defaults()
+    key_detail_map = _load_key_detail_map()
+
+    optimizers: dict[str, dict] = {}
+    for opt_name, defaults in all_defaults.items():
+        clean_defaults = {}
+        for k, v in defaults.items():
+            if isinstance(v, float) and v == float("inf"):
+                clean_defaults[k] = "Infinity"
+            else:
+                clean_defaults[k] = v
+        optimizers[opt_name] = {
+            "keys": list(defaults.keys()),
+            "defaults": clean_defaults,
+        }
+
+    return {
+        "optimizers": optimizers,
+        "detail_map": key_detail_map,
+    }
+
+
+@router.post("/export")
+def export_config() -> dict:
+    service = ConfigService.get_instance()
+    try:
+        return service.export_config()
+    except FileNotFoundError as exc:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Referenced file not found: {exc}",
+        ) from exc
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
diff --git a/web/backend/routers/converter.py b/web/backend/routers/converter.py
new file mode 100644
index 000000000..12eb4be95
--- /dev/null
+++ b/web/backend/routers/converter.py
@@ -0,0 +1,133 @@
+import logging
+import threading
+from uuid import uuid4
+
+from web.backend.utils.path_security import validate_path
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(tags=["tools"])
+
+_convert_lock = threading.Lock()
+
+
+class QuantizationParams(BaseModel):
+    layer_filter: str = ""
+    layer_filter_preset: str = "full"
+    layer_filter_regex: bool = False
+    svd_dtype: str = "NONE"  # DataType enum value
+    svd_rank: int = 16
+    cache_dir: str | None = None
+
+
+class ConvertModelRequest(BaseModel):
+    model_type: str  # ModelType enum value, e.g. "STABLE_DIFFUSION_15"
+    training_method: str  # "FINE_TUNE", "LORA", "EMBEDDING"
+    input_name: str  # file / directory path or HuggingFace repo id
+    output_dtype: str  # "FLOAT_32", "FLOAT_16", "BFLOAT_16"
+    output_model_format: str  # "SAFETENSORS", "DIFFUSERS"
+    output_model_destination: str  # output file / directory path
+    quantization: QuantizationParams | None = None
+
+
+class ConvertModelResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+
+
+def _looks_like_local_path(name: str) -> bool:
+    return name.startswith(("/", "\\", "./", ".\\")) or (len(name) > 1 and name[1] == ":")
+
+
+@router.post("/tools/convert", response_model=ConvertModelResponse)
+def convert_model(req: ConvertModelRequest) -> ConvertModelResponse:
+    validate_path(req.output_model_destination, must_exist=False)
+    if _looks_like_local_path(req.input_name):
+        validate_path(req.input_name, must_exist=True)
+
+    if not _convert_lock.acquire(blocking=False):
+        return ConvertModelResponse(ok=False, error="A conversion is already in progress")
+    try:
+        from modules.util import create
+        from modules.util.config.TrainConfig import QuantizationConfig
+        from modules.util.enum.DataType import DataType
+        from modules.util.enum.ModelFormat import ModelFormat
+        from modules.util.enum.ModelType import ModelType
+        from modules.util.enum.TrainingMethod import TrainingMethod
+        from modules.util.ModelNames import EmbeddingName, ModelNames
+        from modules.util.ModelWeightDtypes import ModelWeightDtypes
+        from modules.util.torch_util import torch_gc
+
+        model_type = ModelType(req.model_type)
+        training_method = TrainingMethod(req.training_method)
+        output_dtype = DataType(req.output_dtype)
+        output_model_format = ModelFormat(req.output_model_format)
+
+        weight_dtypes = ModelWeightDtypes.from_single_dtype(output_dtype)
+        quantization = QuantizationConfig.default_values()
+        if req.quantization is not None:
+            q = req.quantization
+            quantization.layer_filter = q.layer_filter
+            quantization.layer_filter_preset = q.layer_filter_preset
+            quantization.layer_filter_regex = q.layer_filter_regex
+            quantization.svd_dtype = DataType(q.svd_dtype)
+            quantization.svd_rank = q.svd_rank
+            quantization.cache_dir = q.cache_dir
+
+        model_loader = create.create_model_loader(
+            model_type=model_type,
+            training_method=training_method,
+        )
+        model_saver = create.create_model_saver(
+            model_type=model_type,
+            training_method=training_method,
+        )
+
+        logger.info("Loading model %s", req.input_name)
+        if training_method == TrainingMethod.FINE_TUNE:
+            model = model_loader.load(
+                model_type=model_type,
+                model_names=ModelNames(base_model=req.input_name),
+                weight_dtypes=weight_dtypes,
+                quantization=quantization,
+            )
+        elif training_method in (TrainingMethod.LORA, TrainingMethod.EMBEDDING):
+            model = model_loader.load(
+                model_type=model_type,
+                model_names=ModelNames(
+                    lora=req.input_name,
+                    embedding=EmbeddingName(str(uuid4()), req.input_name),
+                ),
+                weight_dtypes=weight_dtypes,
+                quantization=quantization,
+            )
+        else:
+            return ConvertModelResponse(ok=False, error=f"Unsupported training method: {req.training_method}")
+
+        logger.info("Saving model %s", req.output_model_destination)
+        model_saver.save(
+            model=model,
+            model_type=model_type,
+            output_model_format=output_model_format,
+            output_model_destination=req.output_model_destination,
+            dtype=output_dtype.torch_dtype(),
+        )
+        logger.info("Model converted")
+        torch_gc()
+
+        return ConvertModelResponse(ok=True)
+
+    except Exception as exc:
+        logger.exception("Model conversion failed")
+        try:
+            from modules.util.torch_util import torch_gc
+
+            torch_gc()
+        except Exception:
+            pass
+        return ConvertModelResponse(ok=False, error=str(exc))
+    finally:
+        _convert_lock.release()
diff --git a/web/backend/routers/health.py b/web/backend/routers/health.py
new file mode 100644
index 000000000..e613b194e
--- /dev/null
+++ b/web/backend/routers/health.py
@@ -0,0 +1,45 @@
+import asyncio
+import logging
+import os
+import signal
+from contextlib import suppress
+
+from fastapi import APIRouter, HTTPException, Request
+
+router = APIRouter()
+logger = logging.getLogger(__name__)
+
+
+@router.get("/health")
+def health(request: Request):
+    return {"status": "ok", "version": request.app.version}
+
+
+@router.post("/shutdown")
+async def shutdown(request: Request):
+    expected = os.environ.get("OT_SHUTDOWN_TOKEN", "")
+    provided = request.headers.get("x-shutdown-token", "")
+    if not expected or provided != expected:
+        raise HTTPException(status_code=403, detail="Forbidden")
+
+    _cleanup_before_exit()
+    asyncio.get_running_loop().call_later(0.5, _exit)
+    return {"status": "shutting_down"}
+
+
+def _cleanup_before_exit() -> None:
+    with suppress(Exception):
+        from web.backend.services.trainer_service import TrainerService
+
+        trainer_service = TrainerService.get_instance()
+        status = trainer_service.get_status()
+        if status["status"] in ("running", "stopping"):
+            logger.info("Shutdown requested -- stopping active training run")
+            trainer_service.stop_training()
+
+        trainer_service.stop_always_on_tensorboard()
+
+
+def _exit() -> None:
+    # Triggers uvicorn's SIGINT handler → ASGI lifespan shutdown → clean exit.
+    os.kill(os.getpid(), signal.SIGINT)
diff --git a/web/backend/routers/mask_editor.py b/web/backend/routers/mask_editor.py
new file mode 100644
index 000000000..5d61c14cd
--- /dev/null
+++ b/web/backend/routers/mask_editor.py
@@ -0,0 +1,169 @@
+import importlib.util
+import logging
+import os
+from pathlib import Path
+from typing import Annotated
+
+from web.backend.services.tool_service import scan_image_folder
+from web.backend.utils.path_security import validate_path
+
+from fastapi import APIRouter, File, Form, HTTPException, UploadFile
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(tags=["mask-editor"])
+
+_yolo_cache: dict[str, object] = {}
+
+
+class ImageListItem(BaseModel):
+    path: str
+    filename: str
+    has_mask: bool
+
+
+class YoloPredictRequest(BaseModel):
+    image_path: str
+    model_path: str
+
+
+class YoloDetection(BaseModel):
+    class_name: str
+    confidence: float
+    polygon: list[list[float]]
+    bbox: list[float]
+
+
+class YoloPredictResponse(BaseModel):
+    ok: bool
+    detections: list[YoloDetection] = []
+    error: str | None = None
+
+
+@router.get("/tools/mask-editor/images", response_model=list[ImageListItem])
+def list_images(folder: str, include_subdirectories: bool = False):
+    canonical = validate_path(folder, must_exist=True, allow_file=False)
+    images = scan_image_folder(canonical, include_subdirectories)
+    result = []
+    for img_path in images:
+        mask_path = img_path.parent / f"{img_path.stem}-masklabel.png"
+        result.append(
+            ImageListItem(
+                path=str(img_path),
+                filename=img_path.name,
+                has_mask=mask_path.exists(),
+            )
+        )
+    return result
+
+
+@router.get("/tools/mask-editor/image")
+def get_image(path: str):
+    canonical = validate_path(path, must_exist=True, allow_dir=False)
+    ext = os.path.splitext(canonical)[1].lower()
+    media_types = {
+        ".jpg": "image/jpeg",
+        ".jpeg": "image/jpeg",
+        ".png": "image/png",
+        ".webp": "image/webp",
+        ".bmp": "image/bmp",
+        ".tiff": "image/tiff",
+        ".tif": "image/tiff",
+    }
+    media_type = media_types.get(ext, "application/octet-stream")
+
+    def stream():
+        with open(canonical, "rb") as f:
+            while chunk := f.read(65536):
+                yield chunk
+
+    return StreamingResponse(stream(), media_type=media_type)
+
+
+@router.post("/tools/mask-editor/save-mask")
+async def save_mask(
+    image_path: Annotated[str, Form()],
+    smooth: Annotated[int, Form()] = 0,
+    expand: Annotated[int, Form()] = 0,
+    threshold: Annotated[int, Form()] = 128,
+    mask: Annotated[UploadFile, File()] = None,  # type: ignore[assignment]
+):
+    canonical = validate_path(image_path, must_exist=True, allow_dir=False)
+    img_path = Path(canonical)
+    mask_path = img_path.parent / f"{img_path.stem}-masklabel.png"
+
+    mask_data = await mask.read()
+
+    if smooth > 0 or expand > 0:
+        import cv2
+        import numpy as np
+
+        arr = np.frombuffer(mask_data, dtype=np.uint8)
+        img = cv2.imdecode(arr, cv2.IMREAD_GRAYSCALE)
+        if img is None:
+            raise HTTPException(status_code=400, detail="Invalid mask image data")
+
+        if smooth > 0:
+            ksize = smooth * 2 + 1
+            img = cv2.GaussianBlur(img, (ksize, ksize), 0)
+        if expand > 0:
+            kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (expand * 2 + 1, expand * 2 + 1))
+            img = cv2.dilate(img, kernel)
+
+        _, img = cv2.threshold(img, threshold, 255, cv2.THRESH_BINARY)
+        _, buf = cv2.imencode(".png", img)
+        mask_data = buf.tobytes()
+
+    mask_path.write_bytes(mask_data)
+    return {"ok": True, "mask_path": str(mask_path)}
+
+
+@router.post("/tools/mask-editor/yolo-predict", response_model=YoloPredictResponse)
+def yolo_predict(req: YoloPredictRequest):
+    if not importlib.util.find_spec("ultralytics"):
+        return YoloPredictResponse(
+            ok=False,
+            error="Ultralytics is not installed. Install with: pip install ultralytics",
+        )
+
+    image_canonical = validate_path(req.image_path, must_exist=True, allow_dir=False)
+    model_canonical = validate_path(req.model_path, must_exist=True, allow_dir=False)
+
+    try:
+        from ultralytics import YOLO
+
+        if model_canonical not in _yolo_cache:
+            _yolo_cache[model_canonical] = YOLO(model_canonical)
+        model = _yolo_cache[model_canonical]
+
+        results = model.predict(image_canonical, verbose=False)
+        result = results[0] if results else None
+
+        detections: list[YoloDetection] = []
+        if result and result.boxes is not None:
+            names = result.names or {}
+            for i, box in enumerate(result.boxes):
+                cls_id = int(box.cls[0])
+                conf = float(box.conf[0])
+                bbox = box.xyxyn[0].tolist()  # normalized [x1, y1, x2, y2]
+
+                polygon: list[list[float]] = []
+                if result.masks is not None and i < len(result.masks.xyn):
+                    polygon = result.masks.xyn[i].tolist()
+
+                detections.append(
+                    YoloDetection(
+                        class_name=names.get(cls_id, str(cls_id)),
+                        confidence=round(conf, 3),
+                        polygon=polygon,
+                        bbox=bbox,
+                    )
+                )
+
+        return YoloPredictResponse(ok=True, detections=detections)
+
+    except Exception as exc:
+        logger.warning("YOLO prediction failed", exc_info=True)
+        return YoloPredictResponse(ok=False, error=str(exc))
diff --git a/web/backend/routers/presets.py b/web/backend/routers/presets.py
new file mode 100644
index 000000000..955feb1fb
--- /dev/null
+++ b/web/backend/routers/presets.py
@@ -0,0 +1,110 @@
+import os
+
+from web.backend.paths import PRESETS_DIR
+from web.backend.routers.concepts import invalidate_thumbnail_cache
+from web.backend.services.config_service import ConfigService
+from web.backend.utils.path_security import base_match, validate_path
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/presets", tags=["presets"])
+
+_PRESETS_DIR_REAL = os.path.realpath(PRESETS_DIR)
+
+
+def _validate_preset_path(path: str) -> str:
+    canonical = validate_path(path, must_exist=False)
+    if not base_match(canonical, _PRESETS_DIR_REAL):
+        raise HTTPException(
+            status_code=403,
+            detail="Access denied: path is outside the presets directory",
+        )
+    return canonical
+
+
+class PresetInfo(BaseModel):
+    name: str
+    path: str
+    is_builtin: bool
+
+
+class LoadPresetRequest(BaseModel):
+    path: str
+
+
+class SavePresetRequest(BaseModel):
+    name: str
+
+
+@router.get("", response_model=list[PresetInfo])
+def list_presets() -> list[PresetInfo]:
+    presets: list[PresetInfo] = []
+
+    if not os.path.isdir(PRESETS_DIR):
+        return presets
+
+    for filename in sorted(os.listdir(PRESETS_DIR)):
+        if not filename.endswith(".json"):
+            continue
+        name = filename.removesuffix(".json")
+        is_builtin = name.startswith("#")
+        full_path = os.path.join(PRESETS_DIR, filename)
+        presets.append(PresetInfo(name=name, path=full_path, is_builtin=is_builtin))
+
+    return presets
+
+
+@router.post("/load")
+def load_preset(body: LoadPresetRequest) -> dict:
+    canonical = _validate_preset_path(body.path)
+
+    if not os.path.isfile(canonical):
+        raise HTTPException(status_code=404, detail=f"Preset file not found: {body.path}")
+
+    service = ConfigService.get_instance()
+    try:
+        result = service.load_preset(canonical)
+    except Exception as exc:
+        raise HTTPException(status_code=422, detail=f"Failed to load preset: {exc}") from exc
+    invalidate_thumbnail_cache()
+    return result
+
+
+@router.post("/save")
+def save_preset(body: SavePresetRequest) -> dict:
+    name = body.name.strip()
+    if not name:
+        raise HTTPException(status_code=422, detail="Preset name must not be empty")
+    if name.startswith("#"):
+        raise HTTPException(status_code=403, detail="Cannot save a preset with a name starting with '#' (reserved for built-in presets)")
+
+    path = os.path.join(PRESETS_DIR, f"{name}.json")
+    canonical = _validate_preset_path(path)
+
+    service = ConfigService.get_instance()
+    try:
+        service.save_preset(canonical)
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Failed to save preset: {exc}") from exc
+
+    return {"name": name, "path": canonical}
+
+
+@router.delete("/{name}")
+def delete_preset(name: str) -> dict:
+    if name.startswith("#"):
+        raise HTTPException(status_code=403, detail="Cannot delete built-in presets")
+
+    path = os.path.join(PRESETS_DIR, f"{name}.json")
+    canonical = _validate_preset_path(path)
+
+    if not os.path.isfile(canonical):
+        raise HTTPException(status_code=404, detail=f"Preset not found: {name}")
+
+    try:
+        os.remove(canonical)
+    except OSError as exc:
+        raise HTTPException(status_code=500, detail=f"Failed to delete preset: {exc}") from exc
+
+    return {"deleted": name}
diff --git a/web/backend/routers/samples.py b/web/backend/routers/samples.py
new file mode 100644
index 000000000..a024c585e
--- /dev/null
+++ b/web/backend/routers/samples.py
@@ -0,0 +1,43 @@
+from web.backend.services.concept_service import ConceptService
+from web.backend.services.config_service import ConfigService
+
+from fastapi import APIRouter, HTTPException
+
+router = APIRouter(prefix="/samples", tags=["samples"])
+
+
+@router.get("")
+def get_samples() -> list[dict]:
+    service = ConfigService.get_instance()
+    sample_path = service.config.sample_definition_file_name
+
+    if not sample_path:
+        raise HTTPException(status_code=422, detail="No sample_definition_file_name configured")
+
+    concept_service = ConceptService()
+    try:
+        return concept_service.load_samples(sample_path)
+    except FileNotFoundError as exc:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Sample definition file not found: {sample_path}",
+        ) from exc
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+
+
+@router.put("")
+def save_samples(samples: list[dict]) -> dict:
+    service = ConfigService.get_instance()
+    sample_path = service.config.sample_definition_file_name
+
+    if not sample_path:
+        raise HTTPException(status_code=422, detail="No sample_definition_file_name configured")
+
+    concept_service = ConceptService()
+    try:
+        concept_service.save_samples(sample_path, samples)
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+
+    return {"saved": len(samples), "path": sample_path}
diff --git a/web/backend/routers/sampling.py b/web/backend/routers/sampling.py
new file mode 100644
index 000000000..9d5333616
--- /dev/null
+++ b/web/backend/routers/sampling.py
@@ -0,0 +1,64 @@
+from web.backend.services.sampler_service import SamplerService
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+router = APIRouter(tags=["tools"])
+
+
+class SamplerActionResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+
+
+class SamplerSampleResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+    sample: dict | None = None
+
+
+class SamplerStatusResponse(BaseModel):
+    status: str  # "idle" | "loading" | "ready" | "sampling" | "error"
+    error: str | None = None
+    model_loaded: bool
+    sample_progress: dict
+
+
+class StandaloneSampleRequest(BaseModel):
+    prompt: str = ""
+    negative_prompt: str = ""
+    height: int = 512
+    width: int = 512
+    seed: int = 42
+    random_seed: bool = False
+    diffusion_steps: int = 20
+    cfg_scale: float = 7.0
+    noise_scheduler: str = "DDIM"
+
+
+@router.post("/tools/sampling/load-model", response_model=SamplerActionResponse)
+def load_sampling_model():
+    service = SamplerService.get_instance()
+    result = service.load_model()
+    return SamplerActionResponse(**result)
+
+
+@router.post("/tools/sampling/sample", response_model=SamplerSampleResponse)
+def standalone_sample(req: StandaloneSampleRequest):
+    service = SamplerService.get_instance()
+    result = service.sample(req.model_dump())
+    return SamplerSampleResponse(**result)
+
+
+@router.post("/tools/sampling/unload", response_model=SamplerActionResponse)
+def unload_sampling_model():
+    service = SamplerService.get_instance()
+    result = service.unload_model()
+    return SamplerActionResponse(**result)
+
+
+@router.get("/tools/sampling/status", response_model=SamplerStatusResponse)
+def sampling_status():
+    service = SamplerService.get_instance()
+    status = service.get_status()
+    return SamplerStatusResponse(**status)
diff --git a/web/backend/routers/secrets.py b/web/backend/routers/secrets.py
new file mode 100644
index 000000000..2f62a4664
--- /dev/null
+++ b/web/backend/routers/secrets.py
@@ -0,0 +1,115 @@
+import json
+import os
+
+from web.backend.paths import SECRETS_PATH
+from web.backend.services.config_service import ConfigService
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/secrets", tags=["secrets"])
+
+_SENSITIVE_FIELDS = {"huggingface_token", "api_key", "password"}
+
+_MASKED_PREFIX = "<MASKED>"
+
+
+class CloudSecretsBody(BaseModel):
+    api_key: str | None = ""
+    host: str | None = ""
+    port: str | None = ""
+    user: str | None = "root"
+    id: str | None = ""
+    key_file: str | None = ""
+    password: str | None = ""
+
+
+class SecretsBody(BaseModel):
+    huggingface_token: str = ""
+    cloud: CloudSecretsBody | None = None
+
+
+def _mask_value(value: str) -> str:
+    if not value:
+        return ""
+    if len(value) <= 4:
+        return f"{_MASKED_PREFIX}****"
+    return f"{_MASKED_PREFIX}{'*' * (len(value) - 4)}{value[-4:]}"
+
+
+def _mask_secrets(data: dict) -> dict:
+    masked = {}
+    for key, value in data.items():
+        if key.startswith("__"):
+            continue
+        if isinstance(value, dict):
+            masked[key] = _mask_secrets(value)
+        elif isinstance(value, str) and key in _SENSITIVE_FIELDS:
+            masked[key] = _mask_value(value)
+        else:
+            masked[key] = value
+    return masked
+
+
+@router.get("")
+def get_secrets() -> dict:
+    if not os.path.isfile(SECRETS_PATH):
+        service = ConfigService.get_instance()
+        raw = service.config.secrets.to_dict()
+        return _mask_secrets(raw)
+
+    try:
+        with open(SECRETS_PATH, "r", encoding="utf-8") as f:
+            data = json.load(f)
+    except (json.JSONDecodeError, OSError) as exc:
+        raise HTTPException(status_code=500, detail=f"Failed to read secrets: {exc}") from exc
+
+    return _mask_secrets(data)
+
+
+@router.put("")
+def save_secrets(body: SecretsBody) -> dict:
+    data = body.model_dump()
+
+    existing: dict = {}
+    if os.path.isfile(SECRETS_PATH):
+        try:
+            with open(SECRETS_PATH, "r", encoding="utf-8") as f:
+                existing = json.load(f)
+        except (json.JSONDecodeError, OSError):
+            existing = {}
+
+    merged = _merge_secrets(data, existing)
+
+    service = ConfigService.get_instance()
+    service.config.secrets.from_dict(merged)
+
+    try:
+        os.makedirs(os.path.dirname(SECRETS_PATH), exist_ok=True)
+        with open(SECRETS_PATH, "w", encoding="utf-8") as f:
+            json.dump(merged, f, indent=4)
+    except OSError as exc:
+        raise HTTPException(status_code=500, detail=f"Failed to write secrets: {exc}") from exc
+
+    return _mask_secrets(merged)
+
+
+def _merge_secrets(incoming: dict, existing: dict) -> dict:
+    merged = {}
+    for key, value in incoming.items():
+        if isinstance(value, dict) and isinstance(existing.get(key), dict):
+            merged[key] = _merge_secrets(value, existing[key])
+        elif isinstance(value, str) and key in _SENSITIVE_FIELDS and _is_masked(value):
+            merged[key] = existing.get(key, "")
+        else:
+            merged[key] = value
+    for key, value in existing.items():
+        if key not in merged:
+            merged[key] = value
+    return merged
+
+
+def _is_masked(value: str) -> bool:
+    if not value:
+        return False
+    return value.startswith(_MASKED_PREFIX)
diff --git a/web/backend/routers/system.py b/web/backend/routers/system.py
new file mode 100644
index 000000000..05b7242c2
--- /dev/null
+++ b/web/backend/routers/system.py
@@ -0,0 +1,176 @@
+from web.backend.services.monitor_service import MonitorService
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/system", tags=["system"])
+
+
+class GpuMetrics(BaseModel):
+    index: int
+    name: str
+    vram_used_mb: float
+    vram_total_mb: float
+    vram_percent: float
+    temperature: float | None = None
+    utilization: float | None = None
+
+
+class SystemMetricsResponse(BaseModel):
+    cpu_percent: float
+    ram_used_gb: float
+    ram_total_gb: float
+    ram_percent: float
+    gpus: list[GpuMetrics]
+
+
+class GpuInfo(BaseModel):
+    index: int
+    name: str
+    vram_total_mb: float
+
+
+class SystemInfoResponse(BaseModel):
+    cpu_count: int
+    cpu_count_physical: int | None = None
+    ram_total_gb: float
+    gpus: list[GpuInfo]
+
+
+@router.get("/metrics", response_model=SystemMetricsResponse)
+def get_metrics():
+    monitor = MonitorService.get_instance()
+    return SystemMetricsResponse(**monitor.get_metrics())
+
+
+@router.get("/info", response_model=SystemInfoResponse)
+def get_info():
+    monitor = MonitorService.get_instance()
+    return SystemInfoResponse(**monitor.get_system_info())
+
+
+class CacheStatusResponse(BaseModel):
+    cache_dir: str
+    exists: bool
+    size_mb: float
+    file_count: int
+
+
+class CacheActionResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+
+
+@router.get("/cache/status", response_model=CacheStatusResponse)
+def get_cache_status():
+    import os
+
+    from web.backend.services.config_service import ConfigService
+
+    config_service = ConfigService.get_instance()
+    config = config_service.get_config_for_training()
+    cache_dir = getattr(config, "cache_dir", "") or "workspace-cache/run"
+
+    if not os.path.isdir(cache_dir):
+        return CacheStatusResponse(cache_dir=cache_dir, exists=False, size_mb=0, file_count=0)
+
+    total_size = 0
+    file_count = 0
+    for dirpath, _dirnames, filenames in os.walk(cache_dir):
+        for f in filenames:
+            fp = os.path.join(dirpath, f)
+            total_size += os.path.getsize(fp)
+            file_count += 1
+
+    return CacheStatusResponse(
+        cache_dir=cache_dir,
+        exists=True,
+        size_mb=round(total_size / (1024 * 1024), 2),
+        file_count=file_count,
+    )
+
+
+@router.post("/cache/clear", response_model=CacheActionResponse)
+def clear_cache():
+    import os
+    import shutil
+
+    from web.backend.services.config_service import ConfigService
+
+    config_service = ConfigService.get_instance()
+    config = config_service.get_config_for_training()
+    cache_dir = getattr(config, "cache_dir", "") or "workspace-cache/run"
+
+    if not os.path.isdir(cache_dir):
+        return CacheActionResponse(ok=True)
+
+    try:
+        shutil.rmtree(cache_dir)
+        os.makedirs(cache_dir, exist_ok=True)
+        return CacheActionResponse(ok=True)
+    except Exception as e:
+        return CacheActionResponse(ok=False, error=str(e))
+
+
+# ---- Profiling ----
+
+
+class ProfilingDumpResponse(BaseModel):
+    ok: bool
+    path: str | None = None
+    error: str | None = None
+
+
+class ProfilingToggleResponse(BaseModel):
+    ok: bool
+    active: bool = False
+    error: str | None = None
+
+
+_profiling_active = False
+
+
+@router.post("/profiling/dump-stacks", response_model=ProfilingDumpResponse)
+def profiling_dump_stacks():
+    """Dump current Python thread stacks to <workspace>/profiling/stacks_<ts>.txt."""
+    import datetime
+    import pathlib
+    import sys
+    import traceback
+
+    from web.backend.services.config_service import ConfigService
+
+    try:
+        config_service = ConfigService.get_instance()
+        config = config_service.get_config_for_training()
+        workspace = getattr(config, "workspace_dir", "") or "workspace"
+        out_dir = pathlib.Path(workspace) / "profiling"
+        out_dir.mkdir(parents=True, exist_ok=True)
+        ts = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
+        out_path = out_dir / f"stacks_{ts}.txt"
+
+        with out_path.open("w", encoding="utf-8") as fh:
+            fh.write(f"Stack dump captured at {datetime.datetime.now().isoformat()}\n")
+            for tid, frame in sys._current_frames().items():
+                fh.write(f"\n--- thread {tid} ---\n")
+                traceback.print_stack(frame, file=fh)
+
+        return ProfilingDumpResponse(ok=True, path=str(out_path))
+    except Exception as exc:
+        return ProfilingDumpResponse(ok=False, error=str(exc))
+
+
+@router.post("/profiling/toggle", response_model=ProfilingToggleResponse)
+def profiling_toggle():
+    """Toggle Scalene profiling. Requires OneTrainer to be launched with --profile."""
+    global _profiling_active
+    try:
+        import scalene  # noqa: F401
+    except ImportError:
+        return ProfilingToggleResponse(
+            ok=False,
+            active=False,
+            error="Scalene not installed - launch OneTrainer with --profile to enable profiling",
+        )
+    _profiling_active = not _profiling_active
+    return ProfilingToggleResponse(ok=True, active=_profiling_active)
diff --git a/web/backend/routers/tensorboard.py b/web/backend/routers/tensorboard.py
new file mode 100644
index 000000000..23a80239f
--- /dev/null
+++ b/web/backend/routers/tensorboard.py
@@ -0,0 +1,53 @@
+from web.backend.services.tensorboard_service import TensorboardService
+
+from fastapi import APIRouter, HTTPException, Query
+
+router = APIRouter(prefix="/tensorboard", tags=["tensorboard"])
+
+
+@router.get("/runs")
+def list_runs() -> list[str]:
+    service = TensorboardService.get_instance()
+    return service.list_runs()
+
+
+@router.get("/scalars")
+def list_tags(run: str = Query(..., description="Run name")) -> list[str]:
+    service = TensorboardService.get_instance()
+    tags = service.list_tags(run)
+    if not tags and not _run_exists(run):
+        raise HTTPException(status_code=404, detail=f"Run not found: {run}")
+    return tags
+
+
+@router.get("/scalars/{tag:path}")
+def get_scalars(
+    tag: str,
+    run: str = Query(..., description="Run name"),
+    after_step: int = Query(0, description="Only return data after this step (for incremental updates)"),
+) -> list[dict]:
+    service = TensorboardService.get_instance()
+
+    if not _run_exists(run):
+        raise HTTPException(status_code=404, detail=f"Run not found: {run}")
+
+    return service.get_scalars(run, tag, after_step=after_step)
+
+
+def _run_exists(run_name: str) -> bool:
+    service = TensorboardService.get_instance()
+    runs = service.list_runs()
+    return run_name in runs
+
+
+@router.post("/launch")
+def launch():
+    """Start tensorboard subprocess if not running. Returns URL when responsive."""
+    service = TensorboardService.get_instance()
+    return service.ensure_running()
+
+
+@router.post("/stop")
+def stop():
+    service = TensorboardService.get_instance()
+    return service.stop()
diff --git a/web/backend/routers/tools.py b/web/backend/routers/tools.py
new file mode 100644
index 000000000..eb779bd85
--- /dev/null
+++ b/web/backend/routers/tools.py
@@ -0,0 +1,359 @@
+import importlib.util
+import io
+import json
+import logging
+import os
+import platform
+import sys
+import zipfile
+from datetime import datetime, timezone
+
+from web.backend.paths import SECRETS_PATH
+from web.backend.services.tool_service import ToolService
+from web.backend.utils.gpu_info import get_gpu_static_info
+from web.backend.utils.path_security import validate_path
+
+from fastapi import APIRouter
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(tags=["tools"])
+
+_MASKED_PREFIX = "<MASKED>"
+
+
+class CaptionRequest(BaseModel):
+    model: str = "Blip"
+    folder: str
+    initial_caption: str = ""
+    caption_prefix: str = ""
+    caption_postfix: str = ""
+    mode: str = "fill"
+    include_subdirectories: bool = False
+
+
+class ApiCaptionRequest(BaseModel):
+    backend: str = "openai"
+    folder: str
+    prompt: str = ""
+    additional_prompts: list[str] = []
+    mode: str = "fill"
+    include_subdirectories: bool = False
+    caption_prefix: str = ""
+    caption_postfix: str = ""
+    api_url: str = "http://localhost:1234/v1/chat/completions"
+    api_key: str = ""
+    model_name: str = ""
+    system_prompt: str = ""
+    temperature: float = 0.6
+    max_tokens: int = -1
+    enable_thinking: bool = False
+    batch_size: int = 1
+    requests_per_minute: int = 0
+    timeout: int = 120
+    pass_filename: bool = False
+    pass_metadata: bool = False
+    pass_current_caption: bool = False
+
+
+class PreviewRequest(BaseModel):
+    backend: str = ""
+    model: str = ""
+    folder: str = ""
+    image_path: str | None = None
+    prompt: str = ""
+    include_subdirectories: bool = False
+    api_url: str = "http://localhost:1234/v1/chat/completions"
+    api_key: str = ""
+    model_name: str = ""
+    system_prompt: str = ""
+    temperature: float = 0.6
+    max_tokens: int = -1
+    enable_thinking: bool = False
+    timeout: int = 120
+    pass_filename: bool = False
+    pass_metadata: bool = False
+    pass_current_caption: bool = False
+
+
+class PreviewResponse(BaseModel):
+    ok: bool
+    caption: str = ""
+    prompt_used: str = ""
+    image_path: str = ""
+    image_base64: str = ""
+    error: str | None = None
+
+
+class MaskRequest(BaseModel):
+    model: str = "ClipSeg"
+    folder: str
+    prompt: str = ""
+    mode: str = "fill"
+    threshold: float = 0.3
+    smooth: int = 5
+    expand: int = 10
+    alpha: float = 1.0
+    include_subdirectories: bool = False
+    model_path: str | None = None
+
+
+class ToolActionResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+    task_id: str | None = None
+
+
+class ToolStatusResponse(BaseModel):
+    status: str
+    progress: int = 0
+    max_progress: int = 0
+    error: str | None = None
+    task_id: str | None = None
+
+
+class CapabilitiesResponse(BaseModel):
+    ultralytics_available: bool = False
+    caption_models: list[str] = []
+    mask_models: list[str] = []
+
+
+class CaptionKeysBody(BaseModel):
+    openai_api_key: str = ""
+    openai_api_url: str = ""
+    gemini_api_key: str = ""
+
+
+@router.post("/tools/captions/generate", response_model=ToolActionResponse)
+def generate_captions(req: CaptionRequest):
+    validate_path(req.folder, must_exist=True, allow_file=False)
+    service = ToolService.get_instance()
+    result = service.generate_captions(req)
+    return ToolActionResponse(**result)
+
+
+@router.post("/tools/captions/generate-api", response_model=ToolActionResponse)
+def generate_captions_api(req: ApiCaptionRequest):
+    validate_path(req.folder, must_exist=True, allow_file=False)
+    service = ToolService.get_instance()
+    result = service.generate_captions_api(req)
+    return ToolActionResponse(**result)
+
+
+@router.post("/tools/captions/preview", response_model=PreviewResponse)
+def preview_caption(req: PreviewRequest):
+    if req.image_path:
+        validate_path(req.image_path, must_exist=True, allow_dir=False)
+    elif req.folder:
+        validate_path(req.folder, must_exist=True, allow_file=False)
+    service = ToolService.get_instance()
+    result = service.preview_caption(req)
+    return PreviewResponse(**result)
+
+
+@router.post("/tools/masks/generate", response_model=ToolActionResponse)
+def generate_masks(req: MaskRequest):
+    validate_path(req.folder, must_exist=True, allow_file=False)
+    service = ToolService.get_instance()
+    result = service.generate_masks(req)
+    return ToolActionResponse(**result)
+
+
+@router.get("/tools/status", response_model=ToolStatusResponse)
+def get_status():
+    service = ToolService.get_instance()
+    status = service.get_status()
+    return ToolStatusResponse(**status)
+
+
+@router.post("/tools/cancel", response_model=ToolActionResponse)
+def cancel_tool():
+    service = ToolService.get_instance()
+    result = service.cancel()
+    return ToolActionResponse(**result)
+
+
+@router.get("/tools/capabilities", response_model=CapabilitiesResponse)
+def get_capabilities():
+    return CapabilitiesResponse(
+        ultralytics_available=importlib.util.find_spec("ultralytics") is not None,
+        caption_models=["Blip", "Blip2", "WD14 VIT v2", "OpenAI Compatible", "Gemini API"],
+        mask_models=["ClipSeg", "Rembg", "Rembg-Human", "Hex Color", "YOLO"],
+    )
+
+
+def _mask_key(value: str) -> str:
+    if not value:
+        return ""
+    if len(value) <= 4:
+        return f"{_MASKED_PREFIX}****"
+    return f"{_MASKED_PREFIX}{'*' * (len(value) - 4)}{value[-4:]}"
+
+
+def _is_masked(value: str) -> bool:
+    return bool(value) and value.startswith(_MASKED_PREFIX)
+
+
+def _load_secrets() -> dict:
+    if not os.path.isfile(SECRETS_PATH):
+        return {}
+    try:
+        with open(SECRETS_PATH, encoding="utf-8") as f:
+            return json.load(f)
+    except (json.JSONDecodeError, OSError):
+        return {}
+
+
+def _save_secrets(data: dict) -> None:
+    os.makedirs(os.path.dirname(SECRETS_PATH), exist_ok=True)
+    with open(SECRETS_PATH, "w", encoding="utf-8") as f:
+        json.dump(data, f, indent=4)
+
+
+@router.get("/tools/captions/keys")
+def get_caption_keys():
+    secrets = _load_secrets()
+    return {
+        "openai_api_key": _mask_key(secrets.get("caption_openai_api_key", "")),
+        "openai_api_url": secrets.get("caption_openai_api_url", ""),
+        "gemini_api_key": _mask_key(secrets.get("caption_gemini_api_key", "")),
+    }
+
+
+@router.put("/tools/captions/keys")
+def save_caption_keys(body: CaptionKeysBody):
+    secrets = _load_secrets()
+
+    if body.openai_api_key and not _is_masked(body.openai_api_key):
+        secrets["caption_openai_api_key"] = body.openai_api_key
+    if body.openai_api_url:
+        secrets["caption_openai_api_url"] = body.openai_api_url
+    if body.gemini_api_key and not _is_masked(body.gemini_api_key):
+        secrets["caption_gemini_api_key"] = body.gemini_api_key
+
+    _save_secrets(secrets)
+    return {
+        "openai_api_key": _mask_key(secrets.get("caption_openai_api_key", "")),
+        "openai_api_url": secrets.get("caption_openai_api_url", ""),
+        "gemini_api_key": _mask_key(secrets.get("caption_gemini_api_key", "")),
+    }
+
+
+def _collect_system_info() -> str:
+    lines: list[str] = []
+
+    uname = platform.uname()
+    lines.append("=== System Information ===")
+    lines.append(f"OS: {uname.system} {uname.release}")
+    lines.append(f"Version: {uname.version}")
+    lines.append(f"Machine: {uname.machine}")
+    lines.append("")
+
+    lines.append("=== Python Environment ===")
+    lines.append(f"Python Version: {sys.version}")
+    lines.append(f"Python Executable: {sys.executable}")
+    lines.append("")
+
+    lines.append("=== PyTorch / CUDA ===")
+    try:
+        import torch
+
+        lines.append(f"PyTorch Version: {torch.__version__}")
+        lines.append(f"CUDA Available: {torch.cuda.is_available()}")
+        if torch.cuda.is_available():
+            lines.append(f"CUDA Version: {torch.version.cuda}")
+            try:
+                gpus = get_gpu_static_info()
+                for gpu in gpus:
+                    mem_gb = round(gpu["vram_total_mb"] / 1024, 2)
+                    lines.append(f"  GPU {gpu['index']}: {gpu['name']} ({mem_gb} GB)")
+            except Exception as exc:
+                lines.append(f"Error querying GPUs: {exc}")
+    except ImportError:
+        lines.append("PyTorch not installed")
+    except Exception as exc:
+        lines.append(f"Error querying PyTorch: {exc}")
+    lines.append("")
+
+    lines.append("=== Memory ===")
+    try:
+        import psutil
+
+        vm = psutil.virtual_memory()
+        lines.append(f"Total RAM: {round(vm.total / (1024**3), 2)} GB")
+        lines.append(f"Available RAM: {round(vm.available / (1024**3), 2)} GB")
+    except ImportError:
+        lines.append("psutil not installed -- cannot read memory info")
+    except Exception as exc:
+        lines.append(f"Error querying memory: {exc}")
+    lines.append("")
+
+    lines.append("=== CPU ===")
+    lines.append(f"Processor: {platform.processor() or 'Unavailable'}")
+    try:
+        import psutil as _ps
+
+        lines.append(f"Physical Cores: {_ps.cpu_count(logical=False)}")
+        lines.append(f"Logical Cores: {_ps.cpu_count(logical=True)}")
+    except ImportError:
+        pass
+    except Exception as exc:
+        lines.append(f"Error querying CPU: {exc}")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def _collect_log_output() -> str:
+    try:
+        from web.backend.services.log_service import LogService
+
+        history = LogService.get_instance().get_history()
+        return "\n".join(entry["text"] for entry in history)
+    except Exception as exc:
+        return f"Error collecting log output: {exc}"
+
+
+debug_router = APIRouter(tags=["tools"])
+
+
+@debug_router.post("/tools/debug-package")
+def generate_debug_package():
+    buf = io.BytesIO()
+
+    with zipfile.ZipFile(buf, "w", zipfile.ZIP_DEFLATED) as zf:
+        try:
+            from web.backend.services.config_service import ConfigService
+
+            config_dict = ConfigService.get_instance().export_config()
+            config_json = json.dumps(config_dict, indent=2, default=str)
+            zf.writestr("config.json", config_json)
+        except Exception as exc:
+            logger.warning("Could not include config in debug package: %s", exc)
+            zf.writestr("config.json", json.dumps({"error": str(exc)}))
+
+        try:
+            system_info = _collect_system_info()
+            zf.writestr("system_info.txt", system_info)
+        except Exception as exc:
+            logger.warning("Could not collect system info: %s", exc)
+            zf.writestr("system_info.txt", f"Error: {exc}")
+
+        try:
+            log_output = _collect_log_output()
+            zf.writestr("log_output.txt", log_output)
+        except Exception as exc:
+            logger.warning("Could not collect log output: %s", exc)
+            zf.writestr("log_output.txt", f"Error: {exc}")
+
+    buf.seek(0)
+    timestamp = datetime.now(tz=timezone.utc).strftime("%Y%m%d_%H%M%S")
+    filename = f"OneTrainer_debug_{timestamp}.zip"
+
+    return StreamingResponse(
+        buf,
+        media_type="application/zip",
+        headers={"Content-Disposition": f'attachment; filename="{filename}"'},
+    )
diff --git a/web/backend/routers/training.py b/web/backend/routers/training.py
new file mode 100644
index 000000000..70ff43022
--- /dev/null
+++ b/web/backend/routers/training.py
@@ -0,0 +1,87 @@
+from web.backend.services.trainer_service import TrainerService
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+router = APIRouter(tags=["training"])
+
+
+class TrainingActionResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+
+
+class TrainingStatusResponse(BaseModel):
+    status: str  # "idle" | "running" | "stopping" | "error"
+    error: str | None = None
+    start_time: float | None = None
+
+
+class StartTrainingRequest(BaseModel):
+    reattach: bool = False
+
+
+class CustomSampleRequest(BaseModel):
+    prompt: str = ""
+    negative_prompt: str = ""
+    height: int = 512
+    width: int = 512
+    seed: int = 42
+    random_seed: bool = False
+    diffusion_steps: int = 20
+    cfg_scale: float = 7.0
+
+
+@router.post("/training/start", response_model=TrainingActionResponse)
+def start_training(req: StartTrainingRequest | None = None):
+    reattach = req.reattach if req is not None else False
+    service = TrainerService.get_instance()
+    result = service.start_training(reattach=reattach)
+    return TrainingActionResponse(**result)
+
+
+@router.post("/training/stop", response_model=TrainingActionResponse)
+def stop_training():
+    service = TrainerService.get_instance()
+    result = service.stop_training()
+    return TrainingActionResponse(**result)
+
+
+@router.post("/training/sample", response_model=TrainingActionResponse)
+def sample_now():
+    service = TrainerService.get_instance()
+    result = service.sample_now()
+    return TrainingActionResponse(**result)
+
+
+@router.post("/training/sample/custom", response_model=TrainingActionResponse)
+def sample_custom(req: CustomSampleRequest):
+    from modules.util.config.SampleConfig import SampleConfig
+
+    sample_config = SampleConfig.default_values()
+    sample_config.from_dict(req.model_dump())
+
+    service = TrainerService.get_instance()
+    result = service.sample_custom(sample_config)
+    return TrainingActionResponse(**result)
+
+
+@router.post("/training/backup", response_model=TrainingActionResponse)
+def backup_now():
+    service = TrainerService.get_instance()
+    result = service.backup_now()
+    return TrainingActionResponse(**result)
+
+
+@router.post("/training/save", response_model=TrainingActionResponse)
+def save_now():
+    service = TrainerService.get_instance()
+    result = service.save_now()
+    return TrainingActionResponse(**result)
+
+
+@router.get("/training/status", response_model=TrainingStatusResponse)
+def get_status():
+    service = TrainerService.get_instance()
+    status = service.get_status()
+    return TrainingStatusResponse(**status)
diff --git a/web/backend/routers/video_tools.py b/web/backend/routers/video_tools.py
new file mode 100644
index 000000000..3edc2c157
--- /dev/null
+++ b/web/backend/routers/video_tools.py
@@ -0,0 +1,128 @@
+from web.backend.services.video_service import VideoService
+from web.backend.utils.path_security import validate_path
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/tools/video", tags=["tools"])
+
+
+class ExtractClipsRequest(BaseModel):
+    video_path: str = ""
+    directory: str = ""
+    batch_mode: bool = False
+    output_dir: str
+    time_start: str = "00:00:00"
+    time_end: str = "99:99:99"
+    output_subdirectories: bool = False
+    split_at_cuts: bool = False
+    max_length: float = 3.0
+    fps: int = 24
+    remove_borders: bool = False
+    crop_variation: float = 0.2
+
+
+class ExtractImagesRequest(BaseModel):
+    video_path: str = ""
+    directory: str = ""
+    batch_mode: bool = False
+    output_dir: str
+    time_start: str = "00:00:00"
+    time_end: str = "99:99:99"
+    output_subdirectories: bool = False
+    images_per_second: float = 0.5
+    blur_removal: float = 0.2
+    remove_borders: bool = False
+    crop_variation: float = 0.2
+
+
+class DownloadRequest(BaseModel):
+    url: str = ""
+    link_list_path: str = ""
+    batch_mode: bool = False
+    output_dir: str
+    additional_args: str = "--quiet --no-warnings --progress"
+
+
+class VideoToolResponse(BaseModel):
+    ok: bool
+    error: str | None = None
+    message: str | None = None
+
+
+class VideoToolStatusResponse(BaseModel):
+    status: str  # "idle" | "running" | "completed" | "error"
+    message: str | None = None
+    error: str | None = None
+
+
+@router.post("/extract-clips", response_model=VideoToolResponse)
+def extract_clips(req: ExtractClipsRequest):
+    validate_path(req.output_dir, must_exist=False, allow_file=False)
+    if req.batch_mode:
+        validate_path(req.directory, must_exist=True, allow_file=False)
+    else:
+        validate_path(req.video_path, must_exist=True, allow_file=True, allow_dir=False)
+    service = VideoService.get_instance()
+    result = service.extract_clips(
+        video_path=req.video_path,
+        directory=req.directory,
+        batch_mode=req.batch_mode,
+        output_dir=req.output_dir,
+        time_start=req.time_start,
+        time_end=req.time_end,
+        output_subdirectories=req.output_subdirectories,
+        split_at_cuts=req.split_at_cuts,
+        max_length=req.max_length,
+        fps=req.fps,
+        remove_borders=req.remove_borders,
+        crop_variation=req.crop_variation,
+    )
+    return VideoToolResponse(**result)
+
+
+@router.post("/extract-images", response_model=VideoToolResponse)
+def extract_images(req: ExtractImagesRequest):
+    validate_path(req.output_dir, must_exist=False, allow_file=False)
+    if req.batch_mode:
+        validate_path(req.directory, must_exist=True, allow_file=False)
+    else:
+        validate_path(req.video_path, must_exist=True, allow_file=True, allow_dir=False)
+    service = VideoService.get_instance()
+    result = service.extract_images(
+        video_path=req.video_path,
+        directory=req.directory,
+        batch_mode=req.batch_mode,
+        output_dir=req.output_dir,
+        time_start=req.time_start,
+        time_end=req.time_end,
+        output_subdirectories=req.output_subdirectories,
+        images_per_second=req.images_per_second,
+        blur_removal=req.blur_removal,
+        remove_borders=req.remove_borders,
+        crop_variation=req.crop_variation,
+    )
+    return VideoToolResponse(**result)
+
+
+@router.post("/download", response_model=VideoToolResponse)
+def download_videos(req: DownloadRequest):
+    validate_path(req.output_dir, must_exist=False, allow_file=False)
+    if req.batch_mode and req.link_list_path:
+        validate_path(req.link_list_path, must_exist=True, allow_file=True, allow_dir=False)
+    service = VideoService.get_instance()
+    result = service.download_videos(
+        url=req.url,
+        link_list_path=req.link_list_path,
+        batch_mode=req.batch_mode,
+        output_dir=req.output_dir,
+        additional_args=req.additional_args,
+    )
+    return VideoToolResponse(**result)
+
+
+@router.get("/status", response_model=VideoToolStatusResponse)
+def get_status():
+    service = VideoService.get_instance()
+    status = service.get_status()
+    return VideoToolStatusResponse(**status)
diff --git a/web/backend/routers/wiki.py b/web/backend/routers/wiki.py
new file mode 100644
index 000000000..f978e020d
--- /dev/null
+++ b/web/backend/routers/wiki.py
@@ -0,0 +1,238 @@
+import re
+import time
+import urllib.error
+import urllib.request
+from collections import OrderedDict
+
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import Response
+
+router = APIRouter(prefix="/wiki", tags=["wiki"])
+
+WIKI_SECTIONS: list[dict] = [
+    {
+        "title": "Getting Started",
+        "pages": [
+            "Home",
+            "Onboarding-Guide-for-Newcomers",
+            "The-Program",
+            "Model-Support-Overview",
+            "Diffusion-Models-Overview",
+        ],
+    },
+    {
+        "title": "Configuration",
+        "pages": [
+            "General",
+            "Model",
+            "Data",
+            "Concepts",
+            "Aspect-Ratio-Bucketing",
+            "How-to-setup-and-evaluate-validation-datasets",
+            "Prior-Prediction",
+            "How-Validation-works",
+        ],
+    },
+    {
+        "title": "Training",
+        "pages": [
+            "Training",
+            "Optimizers",
+            "Advanced-Optimizers",
+            "Orthogonal-Optimizers",
+            "Custom-Scheduler",
+            "Quantization",
+        ],
+    },
+    {
+        "title": "Output & Tools",
+        "pages": [
+            "Sampling",
+            "Backup-and-Save",
+            "Tools",
+        ],
+    },
+    {
+        "title": "Methods",
+        "pages": [
+            "LoRA",
+            "Embedding",
+            "Additional-Embeddings",
+        ],
+    },
+    {
+        "title": "Model Guides",
+        "pages": [
+            "Flux",
+            "Chroma",
+            "Qwen-Image",
+        ],
+    },
+    {
+        "title": "Cloud & Remote",
+        "pages": [
+            "Cloud-Training",
+            "Manually-setup-OneTrainer-in-Runpod",
+            "Training-on-a-remote-Linux-Server",
+        ],
+    },
+    {
+        "title": "Guides & FAQ",
+        "pages": [
+            "F.A.Q.",
+            "Lessons-Learnt-and-Tutorials",
+            "Common-Mistakes-Coming-From-Kohya",
+            "OneTrainer-March-2024-Guide",
+        ],
+    },
+]
+
+_ALL_SLUGS: set[str] = set()
+for _section in WIKI_SECTIONS:
+    for _page in _section["pages"]:
+        _ALL_SLUGS.add(_page)
+
+_cache: dict[str, tuple[str, float]] = {}
+_CACHE_TTL = 3600
+
+_RAW_WIKI_BASE = "https://raw.githubusercontent.com/wiki/Nerogar/OneTrainer"
+
+
+def _fetch_wiki_page(slug: str) -> str | None:
+    now = time.time()
+
+    if slug in _cache:
+        content, cached_at = _cache[slug]
+        if now - cached_at < _CACHE_TTL:
+            return content
+
+    url = f"{_RAW_WIKI_BASE}/{slug}.md"
+    try:
+        req = urllib.request.Request(url, headers={"User-Agent": "OneTrainerWeb/1.0"})
+        with urllib.request.urlopen(req, timeout=10) as response:
+            content = response.read().decode("utf-8")
+            _cache[slug] = (content, now)
+            return content
+    except (urllib.error.URLError, urllib.error.HTTPError, TimeoutError, OSError):
+        if slug in _cache:
+            return _cache[slug][0]
+        return None
+
+
+def _rewrite_image_urls(content: str) -> str:
+    def _rewrite_md_img(m: re.Match) -> str:
+        alt, url = m.group(1), m.group(2)
+        if url.startswith(("http://", "https://")):
+            proxy_url = f"/api/wiki/image?url={urllib.request.quote(url, safe='')}"
+            return f"![{alt}]({proxy_url})"
+        return m.group(0)
+
+    content = re.sub(r"!\[([^\]]*)\]\(([^)]+)\)", _rewrite_md_img, content)
+
+    def _rewrite_html_img(m: re.Match) -> str:
+        url = m.group(1)
+        if url.startswith(("http://", "https://")):
+            proxy_url = f"/api/wiki/image?url={urllib.request.quote(url, safe='')}"
+            return f'src="{proxy_url}"'
+        return m.group(0)
+
+    content = re.sub(r'src="([^"]+)"', _rewrite_html_img, content)
+
+    return content
+
+
+_MAX_IMAGE_CACHE = 100
+_MAX_IMAGE_SIZE = 10 * 1024 * 1024
+_image_cache: OrderedDict[str, tuple[str, bytes, float]] = OrderedDict()
+_IMAGE_CACHE_TTL = 3600
+
+_ALLOWED_IMAGE_PREFIXES = (
+    "https://github.com/",
+    "https://raw.githubusercontent.com/",
+    "https://user-images.githubusercontent.com/",
+)
+
+_ALLOWED_REDIRECT_PREFIXES = _ALLOWED_IMAGE_PREFIXES + (
+    "https://github-production-user-asset-",
+    "https://objects.githubusercontent.com/",
+)
+
+
+class _SafeRedirectHandler(urllib.request.HTTPRedirectHandler):
+    def redirect_request(self, req, fp, code, msg, headers, newurl):
+        if not newurl.startswith(_ALLOWED_REDIRECT_PREFIXES):
+            raise urllib.error.URLError(f"Redirect to disallowed domain: {newurl}")
+        return super().redirect_request(req, fp, code, msg, headers, newurl)
+
+
+_opener = urllib.request.build_opener(_SafeRedirectHandler)
+
+
+@router.get("/image")
+def proxy_wiki_image(url: str) -> Response:
+    now = time.time()
+
+    if not url.startswith(_ALLOWED_IMAGE_PREFIXES):
+        return Response(status_code=403, content="Forbidden: only GitHub image URLs are allowed")
+
+    if url in _image_cache:
+        content_type, data, cached_at = _image_cache[url]
+        if now - cached_at < _IMAGE_CACHE_TTL:
+            _image_cache.move_to_end(url)
+            return Response(content=data, media_type=content_type)
+
+    try:
+        req = urllib.request.Request(url, headers={"User-Agent": "OneTrainerWeb/1.0"})
+        with _opener.open(req, timeout=15) as response:
+            content_length = response.headers.get("Content-Length")
+            try:
+                content_length_int = int(content_length) if content_length is not None else None
+            except ValueError:
+                content_length_int = None
+            if content_length_int is not None and content_length_int > _MAX_IMAGE_SIZE:
+                return Response(status_code=413, content="Image too large (exceeds 10 MB limit)")
+
+            data = response.read(_MAX_IMAGE_SIZE + 1)
+            if len(data) > _MAX_IMAGE_SIZE:
+                return Response(status_code=413, content="Image too large (exceeds 10 MB limit)")
+
+            content_type = response.headers.get("Content-Type", "image/png")
+
+            if not content_type.split(";")[0].strip().startswith("image/"):
+                return Response(status_code=415, content="Upstream Content-Type is not an image")
+
+            _image_cache[url] = (content_type, data, now)
+            _image_cache.move_to_end(url)
+            while len(_image_cache) > _MAX_IMAGE_CACHE:
+                _image_cache.popitem(last=False)
+            return Response(content=data, media_type=content_type)
+    except (urllib.error.URLError, urllib.error.HTTPError, TimeoutError, OSError):
+        if url in _image_cache:
+            content_type, data, _ = _image_cache[url]
+            if content_type.split(";")[0].strip().startswith("image/"):
+                return Response(content=data, media_type=content_type)
+        return Response(status_code=502, content="Failed to fetch image")
+
+
+@router.get("/pages")
+def list_wiki_pages() -> list[dict]:
+    return WIKI_SECTIONS
+
+
+@router.get("/pages/{slug:path}")
+def get_wiki_page(slug: str) -> dict[str, str]:
+    if slug not in _ALL_SLUGS:
+        raise HTTPException(status_code=404, detail=f"Unknown wiki page: {slug}")
+
+    content = _fetch_wiki_page(slug)
+    if content is None:
+        content = (
+            f"# {slug.replace('-', ' ')}\n\n"
+            "This page could not be loaded from the OneTrainer wiki at this time. "
+            "Please check your internet connection and try again, or visit the wiki directly at "
+            f"[GitHub Wiki](https://github.com/Nerogar/OneTrainer/wiki/{slug})."
+        )
+
+    content = _rewrite_image_urls(content)
+
+    return {"slug": slug, "content": content}
diff --git a/web/backend/services/__init__.py b/web/backend/services/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/backend/services/_serialization.py b/web/backend/services/_serialization.py
new file mode 100644
index 000000000..41f781cc5
--- /dev/null
+++ b/web/backend/services/_serialization.py
@@ -0,0 +1,32 @@
+import base64
+import io
+from typing import Any
+
+
+def serialize_sample(sampler_output: Any) -> dict:
+    from modules.util.enum.FileType import FileType
+
+    file_type: FileType = sampler_output.file_type
+    data = sampler_output.data
+
+    if file_type == FileType.IMAGE:
+        buf = io.BytesIO()
+        data.save(buf, format="PNG")
+        encoded = base64.b64encode(buf.getvalue()).decode("ascii")
+        return {"file_type": "IMAGE", "format": "png", "data": encoded}
+
+    if file_type == FileType.VIDEO:
+        if data is None:
+            return {"file_type": "VIDEO", "format": "raw", "data": None}
+        if isinstance(data, bytes):
+            encoded = base64.b64encode(data).decode("ascii")
+            return {"file_type": "VIDEO", "format": "raw", "data": encoded}
+        return {"file_type": "VIDEO", "format": "raw", "data": None}
+
+    if file_type == FileType.AUDIO:
+        if data is None:
+            return {"file_type": "AUDIO", "format": "raw", "data": None}
+        encoded = base64.b64encode(data).decode("ascii") if isinstance(data, bytes) else None
+        return {"file_type": "AUDIO", "format": "raw", "data": encoded}
+
+    return {"file_type": str(file_type), "format": "unknown", "data": None}
diff --git a/web/backend/services/_singleton.py b/web/backend/services/_singleton.py
new file mode 100644
index 000000000..a75cdd5b3
--- /dev/null
+++ b/web/backend/services/_singleton.py
@@ -0,0 +1,19 @@
+import threading
+
+
+class SingletonMixin:
+    _instance: "SingletonMixin | None" = None
+    _singleton_lock: threading.Lock = threading.Lock()
+
+    def __init_subclass__(cls, **kwargs: object) -> None:
+        super().__init_subclass__(**kwargs)
+        cls._instance = None
+        cls._singleton_lock = threading.Lock()
+
+    @classmethod
+    def get_instance(cls):
+        if cls._instance is None:
+            with cls._singleton_lock:
+                if cls._instance is None:
+                    cls._instance = cls()
+        return cls._instance
diff --git a/web/backend/services/concept_service.py b/web/backend/services/concept_service.py
new file mode 100644
index 000000000..252cc84ae
--- /dev/null
+++ b/web/backend/services/concept_service.py
@@ -0,0 +1,39 @@
+import json
+import logging
+import os
+from typing import Any
+
+from modules.util.config.ConceptConfig import ConceptConfig
+from modules.util.config.SampleConfig import SampleConfig
+
+logger = logging.getLogger(__name__)
+
+
+class ConceptService:
+    def _load_list(self, file_path: str, config_class: Any) -> list[dict]:
+        with open(file_path, "r", encoding="utf-8") as fh:
+            raw_list: list[dict] = json.load(fh)
+
+        return [config_class.default_values().from_dict(entry).to_dict() for entry in raw_list]
+
+    def _save_list(self, file_path: str, items: list[dict], config_class: Any) -> None:
+        normalised = [config_class.default_values().from_dict(entry).to_dict() for entry in items]
+
+        parent = os.path.dirname(file_path)
+        if parent:
+            os.makedirs(parent, exist_ok=True)
+
+        with open(file_path, "w", encoding="utf-8") as fh:
+            json.dump(normalised, fh, indent=4)
+
+    def load_concepts(self, file_path: str) -> list[dict]:
+        return self._load_list(file_path, ConceptConfig)
+
+    def save_concepts(self, file_path: str, concepts: list[dict]) -> None:
+        self._save_list(file_path, concepts, ConceptConfig)
+
+    def load_samples(self, file_path: str) -> list[dict]:
+        return self._load_list(file_path, SampleConfig)
+
+    def save_samples(self, file_path: str, samples: list[dict]) -> None:
+        self._save_list(file_path, samples, SampleConfig)
diff --git a/web/backend/services/config_service.py b/web/backend/services/config_service.py
new file mode 100644
index 000000000..c22cb1b68
--- /dev/null
+++ b/web/backend/services/config_service.py
@@ -0,0 +1,224 @@
+import json
+import logging
+import os
+import tempfile
+import threading
+from contextlib import suppress
+
+import modules.util.create  # noqa: F401 — breaks circular import: optimizer_util->create->ChromaEmbeddingSetup->optimizer_util
+from modules.util.config.SecretsConfig import SecretsConfig
+from modules.util.config.TrainConfig import TrainConfig
+from modules.util.optimizer_util import change_optimizer
+from web.backend.paths import PRESETS_DIR, SECRETS_PATH
+from web.backend.services._singleton import SingletonMixin
+
+logger = logging.getLogger(__name__)
+
+_DEFAULT_PRESET_PATH = os.path.join(PRESETS_DIR, "#.json")
+
+
+class ConfigService(SingletonMixin):
+    _validate_lock: threading.Lock = threading.Lock()
+
+    def __init__(self) -> None:
+        self.config: TrainConfig = TrainConfig.default_values()
+        self.config.from_dict(self.config.to_dict())
+        self._config_lock = threading.Lock()
+        self._load_default_preset()
+        self._load_secrets()
+
+    def _load_secrets(self) -> None:
+        if not os.path.isfile(SECRETS_PATH):
+            return
+        try:
+            with open(SECRETS_PATH, "r", encoding="utf-8") as fh:
+                secrets_dict = json.load(fh)
+            self.config.secrets = SecretsConfig.default_values().from_dict(secrets_dict)
+        except Exception:
+            logger.warning("Failed to load secrets from %s", SECRETS_PATH, exc_info=True)
+
+    def _load_default_preset(self) -> None:
+        if os.path.isfile(_DEFAULT_PRESET_PATH):
+            try:
+                with open(_DEFAULT_PRESET_PATH, "r", encoding="utf-8") as fh:
+                    loaded_dict: dict = json.load(fh)
+                loaded_dict["__version"] = self.config.config_version
+                self.config.from_dict(loaded_dict)
+                logger.info("Restored config from %s", _DEFAULT_PRESET_PATH)
+                return
+            except Exception:
+                logger.warning(
+                    "Failed to load default preset %s, attempting first-run seed",
+                    _DEFAULT_PRESET_PATH,
+                    exc_info=True,
+                )
+
+        seed_path = self._find_first_run_seed_preset()
+        if seed_path is None:
+            return
+
+        try:
+            with open(seed_path, "r", encoding="utf-8") as fh:
+                loaded_dict = json.load(fh)
+            loaded_dict["__version"] = self.config.config_version
+            self.config.from_dict(loaded_dict)
+            logger.info("First-run: seeded config from %s", seed_path)
+            self._save_default_preset()
+        except Exception:
+            logger.warning("Failed to seed first-run config from %s", seed_path, exc_info=True)
+
+    def _find_first_run_seed_preset(self) -> str | None:
+        if not os.path.isdir(PRESETS_DIR):
+            return None
+
+        try:
+            entries = sorted(os.listdir(PRESETS_DIR))
+        except OSError:
+            return None
+
+        def is_builtin(name: str) -> bool:
+            return name.startswith("#") and name.endswith(".json") and name != "#.json"
+
+        builtins = [name for name in entries if is_builtin(name)]
+        if not builtins:
+            return None
+
+        for name in builtins:
+            lowered = name.lower()
+            if "z-image" in lowered or "z_image" in lowered:
+                return os.path.join(PRESETS_DIR, name)
+
+        return os.path.join(PRESETS_DIR, builtins[0])
+
+    def _save_default_preset(self) -> None:
+        try:
+            os.makedirs(PRESETS_DIR, exist_ok=True)
+            settings_dict = self.config.to_settings_dict(secrets=False)
+            fd, tmp_path = tempfile.mkstemp(dir=PRESETS_DIR, suffix=".tmp", prefix="#")
+            try:
+                with os.fdopen(fd, "w", encoding="utf-8") as fh:
+                    json.dump(settings_dict, fh, indent=4)
+                os.replace(tmp_path, _DEFAULT_PRESET_PATH)
+            except BaseException:
+                with suppress(OSError):
+                    os.unlink(tmp_path)
+                raise
+        except Exception:
+            logger.warning("Failed to save default preset %s", _DEFAULT_PRESET_PATH, exc_info=True)
+
+    def get_config_dict(self) -> dict:
+        with self._config_lock:
+            return self.config.to_dict()
+
+    def update_config(self, data: dict) -> dict:
+        with self._config_lock:
+            if "__version" not in data:
+                data["__version"] = self.config.config_version
+            # secrets are persisted exclusively through the /secrets endpoints (which
+            # can hold masked placeholder values in the frontend's copy); never let
+            # this general sync path overwrite the real in-memory secrets with those.
+            data.pop("secrets", None)
+            self.config.from_dict(data)
+            result = self.config.to_dict()
+            self._save_default_preset()
+        return result
+
+    def get_defaults(self) -> dict:
+        return TrainConfig.default_values().to_dict()
+
+    def load_preset(self, preset_path: str) -> dict:
+        with self._config_lock:
+            basename = os.path.basename(preset_path)
+            is_built_in_preset = basename.startswith("#") and basename != "#.json"
+
+            with open(preset_path, "r", encoding="utf-8") as fh:
+                loaded_dict: dict = json.load(fh)
+
+            default_config = TrainConfig.default_values()
+
+            if is_built_in_preset:
+                loaded_dict["__version"] = default_config.config_version
+
+            loaded_config = default_config.from_dict(loaded_dict).to_unpacked_config()
+
+            with suppress(FileNotFoundError), open(SECRETS_PATH, "r", encoding="utf-8") as fh:
+                secrets_dict = json.load(fh)
+                loaded_config.secrets = SecretsConfig.default_values().from_dict(secrets_dict)
+
+            self.config.from_dict(loaded_config.to_dict())
+
+            optimizer_config = change_optimizer(self.config)
+            self.config.optimizer.from_dict(optimizer_config.to_dict())
+
+            return self.config.to_dict()
+
+    def save_preset(self, path: str) -> None:
+        with self._config_lock:
+            settings_dict = self.config.to_settings_dict(secrets=False)
+
+        parent = os.path.dirname(path)
+        if parent:
+            os.makedirs(parent, exist_ok=True)
+
+        with open(path, "w", encoding="utf-8") as fh:
+            json.dump(settings_dict, fh, indent=4)
+
+    def change_optimizer(self, new_optimizer: str) -> dict:
+        with self._config_lock:
+            from modules.util.enum.Optimizer import Optimizer
+            from modules.util.optimizer_util import update_optimizer_config
+
+            update_optimizer_config(self.config)
+
+            new_opt_enum = Optimizer[new_optimizer]
+            self.config.optimizer.optimizer = new_opt_enum
+
+            optimizer_config = change_optimizer(self.config)
+            self.config.optimizer.from_dict(optimizer_config.to_dict())
+
+            return self.config.to_dict()
+
+    def get_config_for_training(self) -> TrainConfig:
+        with self._config_lock:
+            config_dict = self.config.to_dict()
+
+        train_config = TrainConfig.default_values()
+        train_config.from_dict(config_dict)
+        return train_config
+
+    def validate_config(self, data: dict) -> dict:
+        import contextlib
+        import io
+
+        validation_data = dict(data)
+        if "__version" not in validation_data:
+            validation_data["__version"] = TrainConfig.default_values().config_version
+
+        errors: list[str] = []
+
+        with self._validate_lock:
+            captured = io.StringIO()
+            with contextlib.redirect_stdout(captured):
+                try:
+                    test_config = TrainConfig.default_values()
+                    test_config.from_dict(validation_data)
+                except Exception as exc:
+                    errors.append(str(exc))
+
+            output = captured.getvalue()
+            for line in output.splitlines():
+                line = line.strip()
+                if line:
+                    errors.append(line)
+
+        if errors:
+            return {"valid": False, "errors": errors}
+        return {"valid": True}
+
+    def update_cloud_secrets(self, cloud_secrets_dict: dict) -> None:
+        with self._config_lock:
+            self.config.secrets.cloud.from_dict(cloud_secrets_dict)
+
+    def export_config(self) -> dict:
+        with self._config_lock:
+            return self.config.to_pack_dict(secrets=False)
diff --git a/web/backend/services/log_service.py b/web/backend/services/log_service.py
new file mode 100644
index 000000000..67559913b
--- /dev/null
+++ b/web/backend/services/log_service.py
@@ -0,0 +1,111 @@
+import asyncio
+import io
+import logging
+import sys
+import threading
+import time
+from collections import deque
+from collections.abc import Callable
+from typing import Any
+
+from web.backend.services._singleton import SingletonMixin
+
+logger = logging.getLogger(__name__)
+
+_log_reentrant = threading.local()
+
+
+class _TeeWriter(io.TextIOBase):
+    def __init__(self, original: io.TextIOBase, log_service: "LogService") -> None:
+        self._original = original
+        self._log_service = log_service
+
+    def write(self, s: str) -> int:
+        if not s:
+            return 0
+        result = self._original.write(s)
+        self._original.flush()
+
+        self._log_service.append(s)
+
+        return result
+
+    def flush(self) -> None:
+        self._original.flush()
+
+    def fileno(self) -> int:
+        return self._original.fileno()
+
+    @property
+    def encoding(self) -> str:
+        return getattr(self._original, "encoding", "utf-8")
+
+    def isatty(self) -> bool:
+        return False
+
+    def writable(self) -> bool:
+        return True
+
+    def readable(self) -> bool:
+        return False
+
+
+class _WebSocketLogHandler(logging.Handler):
+    def __init__(self, log_service: "LogService") -> None:
+        super().__init__()
+        self._log_service = log_service
+        self.setFormatter(logging.Formatter("%(levelname)s:     %(name)s - %(message)s"))
+
+    def emit(self, record: logging.LogRecord) -> None:
+        try:
+            msg = self.format(record)
+            self._log_service.append(msg + "\n")
+        except Exception:
+            self.handleError(record)
+
+
+class LogService(SingletonMixin):
+    def __init__(self) -> None:
+        self._buffer: deque[dict[str, Any]] = deque(maxlen=1000)
+        self._lock = threading.Lock()
+        self._ws_broadcast: Callable[[dict], None] | None = None
+        self._event_loop: asyncio.AbstractEventLoop | None = None
+        self._installed = False
+
+    def install(self) -> None:
+        if self._installed:
+            return
+        self._installed = True
+
+        sys.stdout = _TeeWriter(sys.stdout, self)  # type: ignore[assignment]
+        sys.stderr = _TeeWriter(sys.stderr, self)  # type: ignore[assignment]
+
+        handler = _WebSocketLogHandler(self)
+        handler.setLevel(logging.INFO)
+        root_logger = logging.getLogger()
+        root_logger.addHandler(handler)
+
+    def set_ws_broadcast(self, broadcast_fn: Callable[[dict], None]) -> None:
+        self._ws_broadcast = broadcast_fn
+
+    def set_event_loop(self, loop: asyncio.AbstractEventLoop) -> None:
+        self._event_loop = loop
+
+    def get_history(self) -> list[dict[str, Any]]:
+        with self._lock:
+            return list(self._buffer)
+
+    def append(self, text: str) -> None:
+        if getattr(_log_reentrant, "in_append", False):
+            return
+        _log_reentrant.in_append = True
+        try:
+            entry = {"text": text, "ts": time.time()}
+            with self._lock:
+                self._buffer.append(entry)
+
+            message = {"type": "log", "data": entry}
+            if self._ws_broadcast is not None:
+                self._ws_broadcast(message)
+        finally:
+            _log_reentrant.in_append = False
diff --git a/web/backend/services/monitor_service.py b/web/backend/services/monitor_service.py
new file mode 100644
index 000000000..db236f428
--- /dev/null
+++ b/web/backend/services/monitor_service.py
@@ -0,0 +1,40 @@
+import contextlib
+import logging
+
+from web.backend.services._singleton import SingletonMixin
+from web.backend.utils.gpu_info import get_gpu_metrics, get_gpu_static_info
+
+import psutil
+
+logger = logging.getLogger(__name__)
+
+
+class MonitorService(SingletonMixin):
+    def __init__(self) -> None:
+        psutil.cpu_percent(interval=None)
+
+    def get_metrics(self) -> dict:
+        cpu_percent = psutil.cpu_percent(interval=None)
+        mem = psutil.virtual_memory()
+
+        return {
+            "cpu_percent": cpu_percent,
+            "ram_used_gb": round(mem.used / (1024**3), 2),
+            "ram_total_gb": round(mem.total / (1024**3), 2),
+            "ram_percent": mem.percent,
+            "gpus": get_gpu_metrics(),
+        }
+
+    def get_system_info(self) -> dict:
+        mem = psutil.virtual_memory()
+        info: dict = {
+            "cpu_count": psutil.cpu_count(logical=True),
+            "cpu_count_physical": psutil.cpu_count(logical=False),
+            "ram_total_gb": round(mem.total / (1024**3), 2),
+            "gpus": [],
+        }
+
+        with contextlib.suppress(Exception):
+            info["gpus"] = get_gpu_static_info()
+
+        return info
diff --git a/web/backend/services/sampler_service.py b/web/backend/services/sampler_service.py
new file mode 100644
index 000000000..2da4c769e
--- /dev/null
+++ b/web/backend/services/sampler_service.py
@@ -0,0 +1,246 @@
+import logging
+import os
+import threading
+import traceback
+from contextlib import suppress
+from typing import Any
+
+from web.backend.services._serialization import serialize_sample
+from web.backend.services._singleton import SingletonMixin
+from web.backend.services.config_service import ConfigService
+
+logger = logging.getLogger(__name__)
+
+
+class SamplerService(SingletonMixin):
+    def __init__(self) -> None:
+        self._model: Any | None = None
+        self._model_sampler: Any | None = None
+        self._train_config: Any | None = None
+        self._status: str = "idle"
+        self._error: str | None = None
+        self._lock = threading.Lock()
+        self._latest_sample: dict | None = None
+        self._sample_progress: dict = {"step": 0, "max_step": 0}
+
+    def get_status(self) -> dict:
+        with self._lock:
+            return {
+                "status": self._status,
+                "error": self._error,
+                "model_loaded": self._model is not None,
+                "sample_progress": dict(self._sample_progress),
+            }
+
+    def _set_status(self, status: str, error: str | None = None) -> None:
+        with self._lock:
+            self._status = status
+            self._error = error
+
+    def load_model(self) -> dict:
+        with self._lock:
+            if self._status in ("loading", "sampling"):
+                return {"ok": False, "error": f"Cannot load model while {self._status}"}
+            self._status = "loading"
+            self._error = None
+
+        try:
+            from modules.util import create
+            from modules.util.config.TrainConfig import TrainConfig
+            from modules.util.enum.EMAMode import EMAMode
+            from modules.util.enum.TrainingMethod import TrainingMethod
+
+            import torch
+
+            config_service = ConfigService.get_instance()
+            config_dict = config_service.get_config_dict()
+
+            train_config = TrainConfig.default_values()
+            train_config.from_dict(config_dict)
+
+            self._train_config = train_config
+
+            initial_config = TrainConfig.default_values().from_dict(config_dict)
+            initial_config.optimizer.optimizer = None
+            initial_config.ema = EMAMode.OFF
+
+            model_loader = create.create_model_loader(
+                model_type=initial_config.model_type,
+                training_method=initial_config.training_method,
+            )
+
+            model_setup = create.create_model_setup(
+                model_type=initial_config.model_type,
+                train_device=torch.device(initial_config.train_device),
+                temp_device=torch.device(initial_config.temp_device),
+                training_method=initial_config.training_method,
+            )
+
+            model_names = initial_config.model_names()
+            if initial_config.continue_last_backup:
+                last_backup_path = initial_config.get_last_backup_path()
+                if last_backup_path:
+                    if initial_config.training_method == TrainingMethod.LORA:
+                        model_names.lora = last_backup_path
+                    elif initial_config.training_method == TrainingMethod.EMBEDDING:
+                        model_names.embedding.model_name = last_backup_path
+                    else:
+                        model_names.base_model = last_backup_path
+                    logger.info("Loading from backup '%s'", last_backup_path)
+
+            if initial_config.quantization.cache_dir is None:
+                initial_config.quantization.cache_dir = initial_config.cache_dir + "/quantization"
+                os.makedirs(initial_config.quantization.cache_dir, exist_ok=True)
+
+            model = model_loader.load(
+                model_type=initial_config.model_type,
+                model_names=model_names,
+                weight_dtypes=initial_config.weight_dtypes(),
+                quantization=initial_config.quantization,
+            )
+            model.train_config = initial_config
+
+            model_setup.setup_optimizations(model, initial_config)
+            model_setup.setup_train_device(model, initial_config)
+            model_setup.setup_model(model, initial_config)
+            model.to(torch.device(initial_config.temp_device))
+
+            model_sampler = create.create_model_sampler(
+                train_device=torch.device(initial_config.train_device),
+                temp_device=torch.device(initial_config.temp_device),
+                model=model,
+                model_type=initial_config.model_type,
+                training_method=initial_config.training_method,
+            )
+
+            with self._lock:
+                self._model = model
+                self._model_sampler = model_sampler
+                self._status = "ready"
+                self._error = None
+
+            logger.info("Standalone sampling model loaded successfully")
+            return {"ok": True}
+
+        except Exception as exc:
+            traceback.print_exc()
+            with self._lock:
+                self._model = None
+                self._model_sampler = None
+                self._train_config = None
+            with suppress(Exception):
+                import torch
+
+                torch.clear_autocast_cache()
+            with suppress(Exception):
+                from modules.util.torch_util import torch_gc
+
+                torch_gc()
+            self._set_status("error", str(exc))
+            return {"ok": False, "error": str(exc)}
+
+    def sample(self, sample_params: dict) -> dict:
+        with self._lock:
+            if self._status == "sampling":
+                return {"ok": False, "error": "A sample is already being generated"}
+            if self._status == "loading":
+                return {"ok": False, "error": "Model is currently loading"}
+
+        if self._model is None:
+            load_result = self.load_model()
+            if not load_result.get("ok"):
+                return load_result
+
+        with self._lock:
+            if self._model is None or self._model_sampler is None:
+                return {"ok": False, "error": "Model is not loaded"}
+            self._status = "sampling"
+            self._error = None
+            self._sample_progress = {"step": 0, "max_step": 0}
+
+        try:
+            import os
+
+            from modules.util.config.SampleConfig import SampleConfig
+            from modules.util.time_util import get_string_timestamp
+
+            sample_config = SampleConfig.default_values()
+            sample_config.from_dict(sample_params)
+            sample_config.from_train_config(self._train_config)
+
+            sample_dir = os.path.join(
+                self._train_config.workspace_dir,
+                "samples",
+                "standalone",
+            )
+            os.makedirs(sample_dir, exist_ok=True)
+
+            progress = self._model.train_progress
+            sample_path = os.path.join(
+                sample_dir,
+                f"{get_string_timestamp()}-standalone-sample-{progress.filename_string()}",
+            )
+
+            captured_output: list[Any] = []
+
+            def on_sample(sampler_output: Any) -> None:
+                captured_output.append(sampler_output)
+
+            def on_progress(step: int, max_step: int) -> None:
+                with self._lock:
+                    self._sample_progress = {"step": step, "max_step": max_step}
+
+            self._model.eval()
+            self._model_sampler.sample(
+                sample_config=sample_config,
+                destination=sample_path,
+                image_format=self._train_config.sample_image_format,
+                video_format=self._train_config.sample_video_format,
+                audio_format=self._train_config.sample_audio_format,
+                on_sample=on_sample,
+                on_update_progress=on_progress,
+            )
+
+            result_data: dict | None = None
+            if captured_output:
+                with suppress(Exception):
+                    result_data = serialize_sample(captured_output[-1])
+
+            with self._lock:
+                self._latest_sample = result_data
+                self._status = "ready"
+                self._sample_progress = {"step": 0, "max_step": 0}
+
+            return {"ok": True, "sample": result_data}
+
+        except Exception as exc:
+            traceback.print_exc()
+            self._set_status("error", str(exc))
+            return {"ok": False, "error": str(exc)}
+
+    def unload_model(self) -> dict:
+        with self._lock:
+            if self._status == "sampling":
+                return {"ok": False, "error": "Cannot unload while sampling"}
+            if self._model is None:
+                return {"ok": True}  # Already unloaded
+
+            self._model = None
+            self._model_sampler = None
+            self._train_config = None
+            self._latest_sample = None
+            self._sample_progress = {"step": 0, "max_step": 0}
+            self._status = "idle"
+            self._error = None
+
+        with suppress(Exception):
+            import torch
+
+            torch.clear_autocast_cache()
+        with suppress(Exception):
+            from modules.util.torch_util import torch_gc
+
+            torch_gc()
+
+        logger.info("Standalone sampling model unloaded")
+        return {"ok": True}
diff --git a/web/backend/services/tensorboard_service.py b/web/backend/services/tensorboard_service.py
new file mode 100644
index 000000000..adb255eea
--- /dev/null
+++ b/web/backend/services/tensorboard_service.py
@@ -0,0 +1,252 @@
+import contextlib
+import logging
+import os
+import shutil
+import subprocess
+import sys
+import threading
+import time
+import urllib.request
+from pathlib import Path
+
+from web.backend.services._singleton import SingletonMixin
+
+logger = logging.getLogger(__name__)
+
+try:
+    from tensorboard.backend.event_processing.event_accumulator import EventAccumulator
+
+    _HAS_TENSORBOARD = True
+except ImportError:
+    _HAS_TENSORBOARD = False
+    logger.warning("tensorboard package not found. TensorBoard tab will return empty data. Install with: pip install tensorboard")
+
+
+MAX_CACHED_ACCUMULATORS = 10
+
+
+class TensorboardService(SingletonMixin):
+    def __init__(self) -> None:
+        self._accumulators: dict[str, EventAccumulator] = {}
+        self._access_times: dict[str, float] = {}
+        self._accumulator_lock = threading.Lock()
+        self._tb_process: subprocess.Popen | None = None
+        self._tb_port: int | None = None
+        self._tb_lock = threading.Lock()
+
+    @staticmethod
+    def _resolve_log_dir(log_dir: str | None = None) -> str:
+        if log_dir:
+            return log_dir
+
+        from web.backend.services.config_service import ConfigService
+
+        config_service = ConfigService.get_instance()
+        return config_service.config.workspace_dir or "workspace"
+
+    @staticmethod
+    def _is_tfevents_dir(directory: str) -> bool:
+        try:
+            for entry in os.scandir(directory):
+                if entry.is_file() and entry.name.startswith("events.out.tfevents"):
+                    return True
+        except OSError:
+            pass
+        return False
+
+    def list_runs(self, log_dir: str | None = None) -> list[str]:
+        resolved = self._resolve_log_dir(log_dir)
+        if not os.path.isdir(resolved):
+            return []
+
+        base = Path(resolved)
+        runs: list[tuple[float, str]] = []
+        for dirpath, _dirnames, filenames in os.walk(resolved):
+            event_files = [f for f in filenames if f.startswith("events.out.tfevents")]
+            if not event_files:
+                continue
+            try:
+                newest_mtime = max(os.path.getmtime(os.path.join(dirpath, f)) for f in event_files)
+            except OSError:
+                continue
+            rel = Path(dirpath).relative_to(base).as_posix()
+            runs.append((newest_mtime, rel))
+
+        runs.sort(key=lambda item: (-item[0], item[1]))
+        return [rel for _, rel in runs]
+
+    def _maybe_evict(self) -> None:
+        while len(self._accumulators) > MAX_CACHED_ACCUMULATORS:
+            oldest_key = min(self._access_times, key=self._access_times.get)  # type: ignore[arg-type]
+            del self._accumulators[oldest_key]
+            del self._access_times[oldest_key]
+            logger.debug("Evicted accumulator cache for: %s", oldest_key)
+
+    def _get_accumulator(self, run_dir: str) -> "EventAccumulator | None":
+        if not _HAS_TENSORBOARD:
+            return None
+
+        with self._accumulator_lock:
+            if run_dir not in self._accumulators:
+                self._maybe_evict()
+                acc = EventAccumulator(run_dir)
+                acc.Reload()
+                self._accumulators[run_dir] = acc
+            else:
+                self._accumulators[run_dir].Reload()
+
+            self._access_times[run_dir] = time.time()
+            return self._accumulators[run_dir]
+
+    def _run_path(self, run_name: str, log_dir: str | None = None) -> str:
+        resolved = self._resolve_log_dir(log_dir)
+        return os.path.join(resolved, run_name)
+
+    def list_tags(self, run_name: str, log_dir: str | None = None) -> list[str]:
+        run_path = self._run_path(run_name, log_dir)
+        if not os.path.isdir(run_path):
+            return []
+
+        acc = self._get_accumulator(run_path)
+        if acc is None:
+            return []
+
+        tags = acc.Tags()
+        return sorted(tags.get("scalars", []))
+
+    def get_scalars(
+        self,
+        run_name: str,
+        tag: str,
+        after_step: int = 0,
+        log_dir: str | None = None,
+    ) -> list[dict]:
+        run_path = self._run_path(run_name, log_dir)
+        if not os.path.isdir(run_path):
+            return []
+
+        acc = self._get_accumulator(run_path)
+        if acc is None:
+            return []
+
+        try:
+            events = acc.Scalars(tag)
+        except KeyError:
+            return []
+
+        return [
+            {
+                "wall_time": event.wall_time,
+                "step": event.step,
+                "value": event.value,
+            }
+            for event in events
+            if event.step > after_step
+        ]
+
+    # ---- Process management ----
+
+    def _is_process_alive(self) -> bool:
+        return self._tb_process is not None and self._tb_process.poll() is None
+
+    @staticmethod
+    def _wait_until_responsive(url: str, timeout: float = 10.0) -> bool:
+        deadline = time.time() + timeout
+        while time.time() < deadline:
+            try:
+                with urllib.request.urlopen(url, timeout=1.0) as resp:
+                    if resp.status == 200:
+                        return True
+            except Exception:  # noqa: BLE001, PERF203
+                time.sleep(0.3)
+        return False
+
+    @staticmethod
+    def _find_tensorboard_executable() -> str | None:
+        """Locate the tensorboard CLI - prefer the one in our active venv."""
+        # 1. Same directory as the running Python interpreter (venv)
+        venv_dir = Path(sys.executable).parent
+        for candidate in ("tensorboard.exe", "tensorboard"):
+            p = venv_dir / candidate
+            if p.is_file():
+                return str(p)
+        # 2. PATH lookup
+        return shutil.which("tensorboard")
+
+    def ensure_running(self) -> dict:
+        """Start tensorboard if not already running. Returns {ok, url, port, error}."""
+        from web.backend.services.config_service import ConfigService
+
+        config_service = ConfigService.get_instance()
+        config = config_service.config
+        log_dir = config.workspace_dir or "workspace"
+        port = int(getattr(config, "tensorboard_port", 6006) or 6006)
+        expose = bool(getattr(config, "tensorboard_expose", False))
+
+        with self._tb_lock:
+            if self._is_process_alive() and self._tb_port == port:
+                url = f"http://localhost:{port}/"
+                return {"ok": True, "url": url, "port": port, "already_running": True}
+
+            tb_exe = self._find_tensorboard_executable()
+            if tb_exe is None:
+                return {
+                    "ok": False,
+                    "error": "tensorboard CLI not found. Install with: pip install tensorboard",
+                }
+
+            host = "0.0.0.0" if expose else "localhost"
+            args = [
+                tb_exe,
+                "--logdir",
+                log_dir,
+                "--port",
+                str(port),
+                "--host",
+                host,
+            ]
+            try:
+                self._tb_process = subprocess.Popen(
+                    args,
+                    stdout=subprocess.DEVNULL,
+                    stderr=subprocess.DEVNULL,
+                )
+                self._tb_port = port
+            except (OSError, FileNotFoundError) as exc:
+                return {"ok": False, "error": f"Failed to launch tensorboard: {exc}"}
+
+            url = f"http://localhost:{port}/"
+            if not self._wait_until_responsive(url, timeout=15.0):
+                return {
+                    "ok": False,
+                    "error": f"tensorboard did not respond at {url} within 15s",
+                    "url": url,
+                    "port": port,
+                }
+            return {"ok": True, "url": url, "port": port, "already_running": False}
+
+    def stop(self) -> dict:
+        with self._tb_lock:
+            if not self._is_process_alive():
+                self._tb_process = None
+                self._tb_port = None
+                return {"ok": True, "was_running": False}
+            try:
+                self._tb_process.terminate()
+                self._tb_process.wait(timeout=5)
+            except Exception:
+                with contextlib.suppress(Exception):
+                    self._tb_process.kill()
+            self._tb_process = None
+            self._tb_port = None
+            return {"ok": True, "was_running": True}
+
+    def clear_cache(self, run_name: str | None = None, log_dir: str | None = None) -> None:
+        with self._accumulator_lock:
+            if run_name:
+                run_path = self._run_path(run_name, log_dir)
+                self._accumulators.pop(run_path, None)
+                self._access_times.pop(run_path, None)
+            else:
+                self._accumulators.clear()
+                self._access_times.clear()
diff --git a/web/backend/services/tool_service.py b/web/backend/services/tool_service.py
new file mode 100644
index 000000000..d0d9548c4
--- /dev/null
+++ b/web/backend/services/tool_service.py
@@ -0,0 +1,856 @@
+import base64
+import concurrent.futures
+import importlib.util
+import io
+import logging
+import random
+import re
+import threading
+import time
+import traceback
+import uuid
+import xml.etree.ElementTree as ET
+from collections.abc import Callable
+from contextlib import suppress
+from pathlib import Path
+from typing import Any, Literal
+
+from web.backend.services._singleton import SingletonMixin
+
+import requests
+from PIL import ExifTags, Image
+
+logger = logging.getLogger(__name__)
+
+Image.MAX_IMAGE_PIXELS = 933_120_000
+
+ToolStatus = Literal["idle", "running", "completed", "error"]
+
+VALID_CAPTION_MODES = {"replace", "fill", "add"}
+
+VALID_MASK_MODES = {"replace", "fill", "add", "subtract", "blend"}
+
+CAPTION_MODEL_MAP: dict[str, str] = {
+    "Blip": "BlipModel",
+    "Blip2": "Blip2Model",
+    "WD14 VIT v2": "WDModel",
+}
+
+MASK_MODEL_MAP: dict[str, str] = {
+    "ClipSeg": "ClipSegModel",
+    "Rembg": "RembgModel",
+    "Rembg-Human": "RembgHumanModel",
+    "Hex Color": "MaskByColor",
+    "YOLO": "YOLOMaskAdapter",
+}
+
+IMAGE_EXTENSIONS = {".jpg", ".jpeg", ".png", ".webp", ".bmp", ".tiff", ".tif"}
+
+VALID_API_BACKENDS = {"openai", "gemini"}
+
+VALID_CAPTION_API_MODES = {"replace", "fill", "add"}
+
+_REFUSAL_PATTERNS = [
+    r"^i('m| am) sorry",
+    r"^i cannot",
+    r"^i can't",
+    r"^i'm unable to",
+    r"^unfortunately",
+    r"^as an ai",
+    r"cannot (assist|help|provide|process|describe|generate)",
+    r"not (able|going) to (describe|caption|tag|process|generate)",
+    r"violates? (my|the|our) (guidelines|policies|terms)",
+    r"content (policy|guidelines|violation)",
+]
+
+
+def _is_refusal(text: str) -> bool:
+    if not text:
+        return True
+    lower = text.lower().strip()
+    return any(re.search(p, lower) for p in _REFUSAL_PATTERNS)
+
+
+def _clean_model_output(text: str) -> str:
+    text = re.sub(r"<think>.*?</think>", "", text, flags=re.DOTALL)
+    return " ".join(text.split()).strip()
+
+
+def _normalize_openai_url(url: str) -> str:
+    url = url.rstrip("/")
+    if not url.endswith("/chat/completions"):
+        url += "/chat/completions"
+    return url
+
+
+def _encode_image_base64(image_path: Path, max_dim: int = 2048) -> str:
+    try:
+        img = Image.open(image_path).convert("RGB")
+        if max_dim > 0 and max(img.size) > max_dim:
+            img.thumbnail((max_dim, max_dim), Image.LANCZOS)
+        buf = io.BytesIO()
+        img.save(buf, format="JPEG", quality=95)
+        return base64.b64encode(buf.getvalue()).decode("utf-8")
+    except Exception:
+        with open(image_path, "rb") as f:
+            return base64.b64encode(f.read()).decode("utf-8")
+
+
+def scan_image_folder(folder: str, include_subdirectories: bool) -> list[Path]:
+    root = Path(folder)
+    if not root.is_dir():
+        return []
+    pattern = "**/*" if include_subdirectories else "*"
+    return sorted(
+        p for p in root.glob(pattern)
+        if p.is_file() and p.suffix.lower() in IMAGE_EXTENSIONS
+        and "-masklabel" not in p.stem
+    )
+
+
+def _extract_image_metadata(image_path: Path) -> dict[str, str]:
+    result: dict[str, str] = {}
+    try:
+        img = Image.open(image_path)
+        exif_data = img.getexif()
+        if exif_data:
+            tag_map = {v: k for k, v in ExifTags.TAGS.items()}
+            for name, tag_id in [
+                ("camera_make", tag_map.get("Make")),
+                ("camera_model", tag_map.get("Model")),
+                ("lens", tag_map.get("LensModel")),
+                ("iso", tag_map.get("ISOSpeedRatings")),
+            ]:
+                if tag_id and tag_id in exif_data:
+                    result[name] = str(exif_data[tag_id])
+            f_number_tag = tag_map.get("FNumber")
+            if f_number_tag and f_number_tag in exif_data:
+                val = exif_data[f_number_tag]
+                if hasattr(val, "numerator"):
+                    result["aperture"] = f"f/{val.numerator / val.denominator:.1f}"
+                else:
+                    result["aperture"] = f"f/{val}"
+            exposure_tag = tag_map.get("ExposureTime")
+            if exposure_tag and exposure_tag in exif_data:
+                val = exif_data[exposure_tag]
+                if hasattr(val, "numerator") and val.numerator and val.denominator:
+                    if val.numerator < val.denominator:
+                        result["exposure"] = f"1/{val.denominator // val.numerator}s"
+                    else:
+                        result["exposure"] = f"{val.numerator / val.denominator}s"
+                else:
+                    result["exposure"] = str(val)
+    except Exception:
+        pass
+
+    try:
+        raw = image_path.read_bytes()
+        start_marker = b"<x:xmpmeta"
+        end_marker = b"</x:xmpmeta>"
+        start_idx = raw.find(start_marker)
+        end_idx = raw.find(end_marker)
+        if start_idx >= 0 and end_idx > start_idx:
+            xmp_bytes = raw[start_idx : end_idx + len(end_marker)]
+            xmp_str = xmp_bytes.decode("utf-8", errors="replace")
+            root_el = ET.fromstring(xmp_str)
+            ns = {
+                "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
+                "dc": "http://purl.org/dc/elements/1.1/",
+            }
+            for desc in root_el.iter("{http://www.w3.org/1999/02/22-rdf-syntax-ns#}Description"):
+                for title_el in desc.iter("{http://purl.org/dc/elements/1.1/}title"):
+                    li = title_el.find(".//rdf:li", ns)
+                    if li is not None and li.text:
+                        result["xmp_title"] = li.text
+                for desc_el in desc.iter("{http://purl.org/dc/elements/1.1/}description"):
+                    li = desc_el.find(".//rdf:li", ns)
+                    if li is not None and li.text:
+                        result["xmp_description"] = li.text
+                for subj_el in desc.iter("{http://purl.org/dc/elements/1.1/}subject"):
+                    keywords = [li.text for li in subj_el.findall(".//rdf:li", ns) if li.text]
+                    if keywords:
+                        result["xmp_keywords"] = ", ".join(keywords)
+    except Exception:
+        pass
+
+    return result
+
+
+class _RateLimiter:
+    def __init__(self, rpm: int):
+        self._interval = 60.0 / rpm if rpm > 0 else 0
+        self._lock = threading.Lock()
+        self._last = 0.0
+
+    def wait(self, cancel_check: Callable[[], bool] | None = None) -> None:
+        if self._interval <= 0:
+            return
+        with self._lock:
+            now = time.monotonic()
+            deadline = self._last + self._interval
+            if now < deadline:
+                delay = deadline - now
+                self._last = deadline
+            else:
+                delay = 0
+                self._last = now
+        while delay > 0:
+            if cancel_check is not None and cancel_check():
+                return
+            chunk = min(delay, 1.0)
+            time.sleep(chunk)
+            delay -= chunk
+
+
+class ToolService(SingletonMixin):
+    def __init__(self) -> None:
+        self._status: ToolStatus = "idle"
+        self._progress: int = 0
+        self._max_progress: int = 0
+        self._error_message: str | None = None
+        self._task_id: str | None = None
+        self._thread: threading.Thread | None = None
+        self._cancel_flag: bool = False
+        self._lock = threading.Lock()
+
+        self._captioning_model: Any = None
+        self._masking_model: Any = None
+
+    def _set_status(self, status: ToolStatus, error: str | None = None) -> None:
+        with self._lock:
+            self._status = status
+            self._error_message = error
+
+    def _update_progress(self, current: int, total: int) -> None:
+        with self._lock:
+            self._progress = current
+            self._max_progress = total
+
+    def get_status(self) -> dict:
+        with self._lock:
+            return {
+                "status": self._status,
+                "progress": self._progress,
+                "max_progress": self._max_progress,
+                "error": self._error_message,
+                "task_id": self._task_id,
+            }
+
+    def _start_background_task(self, target, args: tuple, thread_name: str) -> dict:
+        task_id = str(uuid.uuid4())
+        with self._lock:
+            if self._status == "running":
+                return {"ok": False, "error": "A tool operation is already running"}
+            self._status = "running"
+            self._progress = 0
+            self._max_progress = 0
+            self._error_message = None
+            self._task_id = task_id
+            self._cancel_flag = False
+
+        thread = threading.Thread(
+            target=target,
+            args=(*args, task_id),
+            daemon=True,
+            name=thread_name,
+        )
+        self._thread = thread
+        thread.start()
+        return {"ok": True, "task_id": task_id}
+
+    def generate_captions(self, request: Any) -> dict:
+        return self._start_background_task(
+            self._caption_thread_fn,
+            (request,),
+            "OneTrainerWeb-caption-tool",
+        )
+
+    def _caption_thread_fn(self, request: Any, task_id: str) -> None:
+        try:
+            model = self._load_captioning_model(request.model)
+            if model is None:
+                self._set_status("error", f"Unknown captioning model: {request.model}")
+                return
+
+            mode = request.mode if request.mode in VALID_CAPTION_MODES else "fill"
+
+            model.caption_folder(
+                sample_dir=request.folder,
+                initial_caption=request.initial_caption,
+                caption_prefix=request.caption_prefix,
+                caption_postfix=request.caption_postfix,
+                mode=mode,
+                progress_callback=self._progress_callback,
+                error_callback=self._error_callback,
+                include_subdirectories=request.include_subdirectories,
+            )
+
+            with self._lock:
+                if self._status == "running":
+                    self._status = "completed"
+
+        except InterruptedError:
+            logger.info("Caption generation cancelled by user")
+            self._set_status("idle")
+        except Exception:
+            traceback.print_exc()
+            self._set_status("error", "Caption generation failed -- check the Terminal panel for details")
+        finally:
+            self._thread = None
+            self._release_models()
+
+    def generate_masks(self, request: Any) -> dict:
+        return self._start_background_task(
+            self._mask_thread_fn,
+            (request,),
+            "OneTrainerWeb-mask-tool",
+        )
+
+    def _mask_thread_fn(self, request: Any, task_id: str) -> None:
+        try:
+            model_path = getattr(request, "model_path", None)
+            model = self._load_masking_model(request.model, model_path=model_path)
+            if model is None:
+                self._set_status("error", f"Unknown masking model: {request.model}")
+                return
+
+            mode = request.mode if request.mode in VALID_MASK_MODES else "fill"
+            prompts = [request.prompt] if request.prompt else []
+
+            model.mask_folder(
+                sample_dir=request.folder,
+                prompts=prompts,
+                mode=mode,
+                threshold=request.threshold,
+                smooth_pixels=request.smooth,
+                expand_pixels=request.expand,
+                alpha=request.alpha,
+                progress_callback=self._progress_callback,
+                error_callback=self._error_callback,
+                include_subdirectories=request.include_subdirectories,
+            )
+
+            with self._lock:
+                if self._status == "running":
+                    self._status = "completed"
+
+        except InterruptedError:
+            logger.info("Mask generation cancelled by user")
+            self._set_status("idle")
+        except Exception:
+            traceback.print_exc()
+            self._set_status("error", "Mask generation failed -- check the Terminal panel for details")
+        finally:
+            self._thread = None
+            self._release_models()
+
+    def generate_captions_api(self, request: Any) -> dict:
+        return self._start_background_task(
+            self._caption_api_thread_fn,
+            (request,),
+            "OneTrainerWeb-caption-api-tool",
+        )
+
+    def _caption_api_thread_fn(self, request: Any, task_id: str) -> None:
+        try:
+            backend = request.backend
+            if backend not in VALID_API_BACKENDS:
+                self._set_status("error", f"Unknown API backend: {backend}")
+                return
+
+            images = scan_image_folder(request.folder, request.include_subdirectories)
+            if not images:
+                self._set_status("error", "No images found in the specified folder")
+                return
+
+            mode = request.mode if request.mode in VALID_CAPTION_API_MODES else "fill"
+            prompts = [request.prompt] if request.prompt else ["Describe this image."]
+            if request.additional_prompts:
+                prompts.extend(p for p in request.additional_prompts if p.strip())
+
+            rpm = getattr(request, "requests_per_minute", 0)
+            rate_limiter = _RateLimiter(rpm)
+            batch_size = max(1, getattr(request, "batch_size", 1))
+            session = requests.Session()
+            adapter = requests.adapters.HTTPAdapter(pool_maxsize=max(batch_size, 10))
+            session.mount("http://", adapter)
+            session.mount("https://", adapter)
+
+            processed = 0
+            total = len(images)
+            self._update_progress(0, total)
+
+            def process_image(img_path: Path) -> None:
+                nonlocal processed
+                if self._cancel_flag:
+                    return
+                rate_limiter.wait(lambda: self._cancel_flag)
+                if self._cancel_flag:
+                    return
+
+                txt_path = img_path.with_suffix(".txt")
+                if mode == "fill" and txt_path.exists() and txt_path.read_text(encoding="utf-8").strip():
+                    processed += 1
+                    self._update_progress(processed, total)
+                    return
+
+                selected_prompt = random.choice(prompts)
+                full_prompt = self._build_caption_prompt(selected_prompt, img_path, request)
+
+                try:
+                    if backend == "openai":
+                        caption = self._call_openai_api(img_path, full_prompt, request, session)
+                    else:
+                        caption = self._call_gemini_api(img_path, full_prompt, request, session)
+
+                    if _is_refusal(caption):
+                        logger.warning("Refusal detected for %s: %s", img_path.name, caption[:80])
+                        processed += 1
+                        self._update_progress(processed, total)
+                        return
+
+                    final = (
+                        (getattr(request, "caption_prefix", "") or "")
+                        + caption
+                        + (getattr(request, "caption_postfix", "") or "")
+                    )
+
+                    if mode == "replace" or not txt_path.exists():
+                        txt_path.write_text(final, encoding="utf-8")
+                    elif mode == "add":
+                        existing = txt_path.read_text(encoding="utf-8")
+                        txt_path.write_text(existing.rstrip("\n") + "\n" + final, encoding="utf-8")
+                except Exception:
+                    logger.warning("Failed to caption %s", img_path.name, exc_info=True)
+
+                processed += 1
+                self._update_progress(processed, total)
+
+            with concurrent.futures.ThreadPoolExecutor(max_workers=batch_size) as executor:
+                futures = {executor.submit(process_image, p): p for p in images}
+                for future in concurrent.futures.as_completed(futures):
+                    if self._cancel_flag:
+                        executor.shutdown(wait=False, cancel_futures=True)
+                        break
+                    future.result()
+
+            with self._lock:
+                if self._status == "running":
+                    self._status = "completed"
+
+        except InterruptedError:
+            logger.info("API caption generation cancelled")
+            self._set_status("idle")
+        except Exception:
+            traceback.print_exc()
+            self._set_status("error", "API caption generation failed -- check the Terminal panel for details")
+        finally:
+            self._thread = None
+
+    def _build_caption_prompt(self, base_prompt: str, image_path: Path, request: Any) -> str:
+        hints: list[str] = []
+        if getattr(request, "pass_filename", False):
+            hints.append(f"Filename: {image_path.stem}")
+        if getattr(request, "pass_metadata", False):
+            meta = _extract_image_metadata(image_path)
+            if meta:
+                hints.append("Image metadata: " + "; ".join(f"{k}: {v}" for k, v in meta.items()))
+        if getattr(request, "pass_current_caption", False):
+            txt_path = image_path.with_suffix(".txt")
+            if txt_path.exists():
+                content = txt_path.read_text(encoding="utf-8").strip()
+                if content:
+                    hints.append(f"Current caption: {content}")
+
+        if hints:
+            return "\n".join(hints) + "\n\n" + base_prompt
+        return base_prompt
+
+    def _post_with_retry(
+        self,
+        session: requests.Session,
+        url: str,
+        payload: dict,
+        headers: dict,
+        *,
+        max_retries: int = 6,
+        timeout: int = 120,
+        label: str = "API",
+    ) -> dict:
+        r_json: dict = {}
+        for attempt in range(max_retries):
+            if self._cancel_flag:
+                raise InterruptedError("Cancelled")
+            try:
+                response = session.post(url, json=payload, headers=headers, timeout=timeout)
+            except requests.exceptions.ConnectionError:
+                if attempt < max_retries - 1:
+                    wait = min(5 * (2**attempt), 60)
+                    time.sleep(wait)
+                    continue
+                raise
+            if response.status_code == 429 and attempt < 1:
+                wait = min(int(response.headers.get("Retry-After", 10)), 30)
+                time.sleep(wait)
+                continue
+            if response.status_code in (500, 502, 503) and attempt < max_retries - 1:
+                wait = min(5 * (attempt + 1), 30)
+                time.sleep(wait)
+                continue
+            response.raise_for_status()
+            r_json = response.json()
+            break
+        else:
+            raise RuntimeError(f"{label} retries exhausted after {max_retries} attempts")
+        return r_json
+
+    def _call_openai_api(
+        self,
+        image_path: Path,
+        prompt: str,
+        config: Any,
+        session: requests.Session,
+    ) -> str:
+        api_url = _normalize_openai_url(getattr(config, "api_url", "http://localhost:1234/v1/chat/completions"))
+        api_key = getattr(config, "api_key", "") or ""
+        model = getattr(config, "model_name", "") or "local-model"
+        system_prompt = getattr(config, "system_prompt", "") or ""
+        temperature = getattr(config, "temperature", 0.6)
+        max_tokens = getattr(config, "max_tokens", -1)
+        enable_thinking = getattr(config, "enable_thinking", False)
+        timeout = getattr(config, "timeout", 120)
+
+        b64 = _encode_image_base64(image_path)
+
+        messages: list[dict] = []
+        if system_prompt:
+            messages.append({"role": "system", "content": system_prompt})
+        messages.append(
+            {
+                "role": "user",
+                "content": [
+                    {"type": "text", "text": prompt},
+                    {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{b64}"}},
+                ],
+            }
+        )
+
+        payload: dict[str, Any] = {
+            "model": model,
+            "messages": messages,
+            "temperature": temperature,
+            "stream": False,
+            "enable_thinking": enable_thinking,
+        }
+        if max_tokens > 0:
+            payload["max_tokens"] = max_tokens
+
+        headers = {"Content-Type": "application/json"}
+        if api_key:
+            headers["Authorization"] = f"Bearer {api_key}"
+
+        r_json = self._post_with_retry(
+            session,
+            api_url,
+            payload,
+            headers,
+            max_retries=6,
+            timeout=timeout,
+            label="OpenAI API",
+        )
+
+        if "choices" not in r_json or not r_json["choices"]:
+            error_detail = r_json.get("error", {})
+            msg = (
+                error_detail.get("message", str(error_detail)) if isinstance(error_detail, dict) else str(error_detail)
+            )
+            raise ValueError(f"API error: {msg}" if msg else f"Unexpected response: {str(r_json)[:300]}")
+
+        caption = r_json["choices"][0]["message"]["content"]
+        return _clean_model_output(caption)
+
+    def _call_gemini_api(
+        self,
+        image_path: Path,
+        prompt: str,
+        config: Any,
+        session: requests.Session,
+    ) -> str:
+        api_key = getattr(config, "api_key", "") or ""
+        if not api_key:
+            raise ValueError("Gemini API key is required")
+
+        model = getattr(config, "model_name", "") or "gemini-1.5-flash"
+        model_for_url = model.split("/")[-1] if "/" in model else model
+        system_prompt = getattr(config, "system_prompt", "") or ""
+        temperature = getattr(config, "temperature", 0.6)
+        max_tokens = getattr(config, "max_tokens", -1)
+        timeout = getattr(config, "timeout", 120)
+
+        url = f"https://generativelanguage.googleapis.com/v1beta/models/{model_for_url}:generateContent?key={api_key}"
+        b64 = _encode_image_base64(image_path)
+
+        payload: dict[str, Any] = {
+            "contents": [
+                {
+                    "parts": [
+                        {"text": prompt},
+                        {"inline_data": {"mime_type": "image/jpeg", "data": b64}},
+                    ],
+                }
+            ],
+            "generationConfig": {"temperature": temperature},
+        }
+        if system_prompt:
+            payload["system_instruction"] = {"parts": {"text": system_prompt}}
+        if max_tokens > 0:
+            payload["generationConfig"]["maxOutputTokens"] = max_tokens
+
+        headers = {"Content-Type": "application/json"}
+
+        r_json = self._post_with_retry(
+            session,
+            url,
+            payload,
+            headers,
+            max_retries=5,
+            timeout=timeout,
+            label="Gemini API",
+        )
+
+        try:
+            candidate = r_json["candidates"][0]
+            finish_reason = candidate.get("finishReason", "")
+            if finish_reason == "SAFETY":
+                raise ValueError(f"Safety filter blocked: {candidate.get('safetyRatings', 'Unknown')}")
+            caption = candidate["content"]["parts"][0]["text"]
+        except (KeyError, IndexError) as exc:
+            if "promptFeedback" in r_json:
+                block_reason = r_json["promptFeedback"].get("blockReason", "unknown")
+                raise ValueError(f"Prompt blocked: {block_reason}") from exc
+            raise ValueError(f"Unexpected Gemini response: {str(r_json)[:300]}") from exc
+
+        return _clean_model_output(caption)
+
+    def preview_caption(self, request: Any) -> dict:
+        folder = getattr(request, "folder", "")
+        image_path_str = getattr(request, "image_path", None)
+        backend = getattr(request, "backend", "")
+        model_name = getattr(request, "model", "")
+
+        if image_path_str:
+            image_path = Path(image_path_str)
+        else:
+            images = scan_image_folder(folder, getattr(request, "include_subdirectories", False))
+            if not images:
+                return {"ok": False, "error": "No images found in the specified folder"}
+            image_path = random.choice(images)
+
+        if not image_path.exists():
+            return {"ok": False, "error": f"Image not found: {image_path}"}
+
+        prompt = getattr(request, "prompt", "") or "Describe this image."
+        full_prompt = self._build_caption_prompt(prompt, image_path, request)
+
+        try:
+            img = Image.open(image_path).convert("RGB")
+            img.thumbnail((512, 512), Image.LANCZOS)
+            buf = io.BytesIO()
+            img.save(buf, format="JPEG", quality=85)
+            thumbnail_b64 = base64.b64encode(buf.getvalue()).decode("utf-8")
+        except Exception:
+            thumbnail_b64 = ""
+
+        try:
+            if backend in VALID_API_BACKENDS:
+                session = requests.Session()
+                if backend == "openai":
+                    caption = self._call_openai_api(image_path, full_prompt, request, session)
+                else:
+                    caption = self._call_gemini_api(image_path, full_prompt, request, session)
+            elif model_name in CAPTION_MODEL_MAP:
+                model = self._load_captioning_model(model_name)
+                if model is None:
+                    return {"ok": False, "error": f"Unknown model: {model_name}"}
+                caption = model.caption_image(str(image_path))
+            else:
+                return {"ok": False, "error": f"Unknown backend/model: {backend or model_name}"}
+        except Exception as exc:
+            return {"ok": False, "error": str(exc)}
+
+        return {
+            "ok": True,
+            "caption": caption,
+            "prompt_used": full_prompt,
+            "image_path": str(image_path),
+            "image_base64": thumbnail_b64,
+        }
+
+    def cancel(self) -> dict:
+        with self._lock:
+            if self._status != "running":
+                return {"ok": False, "error": "No tool operation is running"}
+            self._cancel_flag = True
+            self._status = "idle"
+            self._error_message = None
+        return {"ok": True}
+
+    def _progress_callback(self, current: int, total: int) -> None:
+        if self._cancel_flag:
+            raise InterruptedError("Tool operation cancelled by user")
+        self._update_progress(current, total)
+
+    def _error_callback(self, filename: str) -> None:
+        logger.warning("Tool error processing file: %s", filename)
+
+    def _load_captioning_model(self, model_name: str) -> Any:
+        class_name = CAPTION_MODEL_MAP.get(model_name)
+        if class_name is None:
+            return None
+
+        current_type = type(self._captioning_model).__name__ if self._captioning_model else None
+        if current_type == class_name:
+            return self._captioning_model
+
+        from modules.util.torch_util import default_device
+
+        import torch
+
+        self._release_models()
+        logger.info("Loading %s captioning model...", model_name)
+        module = importlib.import_module(f"modules.module.{class_name}")
+        cls = getattr(module, class_name)
+        self._captioning_model = cls(default_device, torch.float16)
+        return self._captioning_model
+
+    def _load_masking_model(self, model_name: str, model_path: str | None = None) -> Any:
+        if model_name == "YOLO":
+            if not importlib.util.find_spec("ultralytics"):
+                raise ImportError(
+                    "Ultralytics is not installed. Install it with: pip install ultralytics\n"
+                    "Note: Ultralytics has its own license (AGPL-3.0). "
+                    "It is not bundled with OneTrainer."
+                )
+            if not model_path:
+                raise ValueError("YOLO model requires a .pt model file path")
+            current_type = type(self._masking_model).__name__ if self._masking_model else None
+            cached_path = getattr(self._masking_model, "_yolo_model_path", None)
+            if current_type != "YOLOMaskAdapter" or cached_path != model_path:
+                self._release_models()
+                logger.info("Loading YOLO masking model from %s...", model_path)
+                self._masking_model = YOLOMaskAdapter(model_path)
+            return self._masking_model
+
+        class_name = MASK_MODEL_MAP.get(model_name)
+        if class_name is None:
+            return None
+
+        current_type = type(self._masking_model).__name__ if self._masking_model else None
+        if current_type == class_name:
+            return self._masking_model
+
+        from modules.util.torch_util import default_device
+
+        import torch
+
+        self._release_models()
+        logger.info("Loading %s masking model...", model_name)
+        module = importlib.import_module(f"modules.module.{class_name}")
+        cls = getattr(module, class_name)
+        self._masking_model = cls(default_device, torch.float32)
+        return self._masking_model
+
+    def _release_models(self) -> None:
+        freed = False
+        if self._captioning_model is not None:
+            self._captioning_model = None
+            freed = True
+        if self._masking_model is not None:
+            self._masking_model = None
+            freed = True
+
+        if freed:
+            with suppress(Exception):
+                from modules.util.torch_util import torch_gc
+
+                torch_gc()
+
+
+class YOLOMaskAdapter:
+    def __init__(self, model_path: str):
+        from ultralytics import YOLO
+
+        self._model = YOLO(model_path)
+        self._yolo_model_path = model_path
+
+    def mask_folder(
+        self,
+        sample_dir: str,
+        prompts: list[str] | None = None,
+        mode: str = "replace",
+        threshold: float = 0.3,
+        smooth_pixels: int = 5,
+        expand_pixels: int = 10,
+        alpha: float = 1.0,
+        progress_callback: Any = None,
+        error_callback: Any = None,
+        include_subdirectories: bool = False,
+    ) -> None:
+        import cv2
+        import numpy as np
+
+        images = scan_image_folder(sample_dir, include_subdirectories)
+        total = len(images)
+
+        for idx, img_path in enumerate(images):
+            try:
+                mask_path = img_path.parent / f"{img_path.stem}-masklabel.png"
+                if mode == "fill" and mask_path.exists():
+                    if progress_callback:
+                        progress_callback(idx + 1, total)
+                    continue
+
+                results = self._model.predict(str(img_path), conf=threshold, verbose=False)
+                result = results[0] if results else None
+
+                img = cv2.imread(str(img_path))
+                h, w = img.shape[:2]
+                combined_mask = np.zeros((h, w), dtype=np.uint8)
+
+                if result and result.masks is not None:
+                    for mask_data in result.masks.data:
+                        binary = (mask_data.cpu().numpy() * 255).astype(np.uint8)
+                        if binary.shape[:2] != (h, w):
+                            binary = cv2.resize(binary, (w, h), interpolation=cv2.INTER_LINEAR)
+                        combined_mask = cv2.bitwise_or(combined_mask, binary)
+
+                if smooth_pixels > 0:
+                    ksize = smooth_pixels * 2 + 1
+                    combined_mask = cv2.GaussianBlur(combined_mask, (ksize, ksize), 0)
+                if expand_pixels > 0:
+                    kernel = cv2.getStructuringElement(
+                        cv2.MORPH_ELLIPSE, (expand_pixels * 2 + 1, expand_pixels * 2 + 1)
+                    )
+                    combined_mask = cv2.dilate(combined_mask, kernel)
+                _, combined_mask = cv2.threshold(combined_mask, 128, 255, cv2.THRESH_BINARY)
+
+                if mode in ("replace", "fill"):
+                    cv2.imwrite(str(mask_path), combined_mask)
+                elif mode == "add" and mask_path.exists():
+                    existing = cv2.imread(str(mask_path), cv2.IMREAD_GRAYSCALE)
+                    merged = cv2.bitwise_or(existing, combined_mask)
+                    cv2.imwrite(str(mask_path), merged)
+                elif mode == "subtract" and mask_path.exists():
+                    existing = cv2.imread(str(mask_path), cv2.IMREAD_GRAYSCALE)
+                    merged = cv2.bitwise_and(existing, cv2.bitwise_not(combined_mask))
+                    cv2.imwrite(str(mask_path), merged)
+                else:
+                    cv2.imwrite(str(mask_path), combined_mask)
+
+            except Exception:
+                logger.warning("YOLO mask failed for %s", img_path.name, exc_info=True)
+                if error_callback:
+                    error_callback(str(img_path))
+
+            if progress_callback:
+                progress_callback(idx + 1, total)
diff --git a/web/backend/services/trainer_service.py b/web/backend/services/trainer_service.py
new file mode 100644
index 000000000..c8210f4cc
--- /dev/null
+++ b/web/backend/services/trainer_service.py
@@ -0,0 +1,312 @@
+import logging
+import threading
+import time
+import traceback
+from collections.abc import Callable
+from contextlib import suppress
+from typing import Any, Literal
+
+from web.backend.services._serialization import serialize_sample
+from web.backend.services._singleton import SingletonMixin
+from web.backend.services.concept_service import ConceptService
+from web.backend.services.config_service import ConfigService
+
+logger = logging.getLogger(__name__)
+
+TrainingStatus = Literal["idle", "starting", "running", "stopping", "error"]
+
+
+class TrainerService(SingletonMixin):
+    def __init__(self) -> None:
+        self._status: TrainingStatus = "idle"
+        self._error_message: str | None = None
+        self._training_thread: threading.Thread | None = None
+        self._training_commands: Any | None = None
+        self._training_callbacks: Any | None = None
+        self._start_time: float | None = None
+        self._status_lock = threading.Lock()
+        self._ws_broadcast: Callable[[dict], None] | None = None
+
+    def set_ws_broadcast(self, fn: Callable[[dict], None]) -> None:
+        self._ws_broadcast = fn
+
+    def _broadcast(self, message: dict) -> None:
+        if self._ws_broadcast is not None:
+            with suppress(Exception):
+                self._ws_broadcast(message)
+
+    def _set_status(self, status: TrainingStatus, error_message: str | None = None) -> None:
+        with self._status_lock:
+            self._status = status
+            self._error_message = error_message
+
+    def get_status(self) -> dict:
+        with self._status_lock:
+            return {
+                "status": self._status,
+                "error": self._error_message,
+                "start_time": self._start_time,
+            }
+
+    def start_training(self, reattach: bool = False, train_config: Any | None = None) -> dict:
+        with self._status_lock:
+            if self._status in ("running", "stopping", "starting"):
+                return {"ok": False, "error": f"Training is already {self._status}"}
+            self._status = "starting"
+
+        config_service = ConfigService.get_instance()
+        if train_config is None:
+            train_config = config_service.get_config_for_training()
+
+            concept_service = ConceptService()
+
+            with suppress(Exception):
+                concepts = concept_service.load_concepts(train_config.concept_file_name)
+                concept_service.save_concepts(train_config.concept_file_name, concepts)
+            with suppress(Exception):
+                samples = concept_service.load_samples(train_config.sample_definition_file_name)
+                concept_service.save_samples(train_config.sample_definition_file_name, samples)
+
+        if train_config.tensorboard and not train_config.tensorboard_always_on:
+            self.stop_always_on_tensorboard()
+
+        from modules.util.callbacks.TrainCallbacks import TrainCallbacks
+        from modules.util.commands.TrainCommands import TrainCommands
+
+        commands = TrainCommands()
+
+        callbacks = TrainCallbacks(
+            on_update_train_progress=self._on_update_train_progress,
+            on_update_status=self._on_update_status,
+            on_sample_default=self._on_sample_default,
+            on_update_sample_default_progress=self._on_update_sample_default_progress,
+            on_sample_custom=self._on_sample_custom,
+            on_update_sample_custom_progress=self._on_update_sample_custom_progress,
+        )
+
+        from modules.util import create
+
+        try:
+            trainer = create.create_trainer(train_config, callbacks, commands, reattach=reattach)
+        except Exception as e:
+            with self._status_lock:
+                self._status = "idle"
+            return {"ok": False, "error": str(e)}
+
+        with suppress(Exception):
+            from modules.util.torch_util import torch_gc
+
+            torch_gc()
+
+        self._training_commands = commands
+        self._training_callbacks = callbacks
+        with self._status_lock:
+            self._status = "running"
+        self._broadcast({"type": "status", "data": {"text": "Starting training..."}})
+
+        thread = threading.Thread(
+            target=self._training_thread_fn,
+            args=(trainer, train_config),
+            daemon=True,
+            name="OneTrainerWeb-training",
+        )
+        self._training_thread = thread
+        thread.start()
+
+        return {"ok": True}
+
+    def _training_thread_fn(self, trainer: Any, config: Any) -> None:
+        error_caught = False
+
+        try:
+            trainer.start()
+
+            if config.cloud.enabled:
+                with suppress(Exception):
+                    from web.backend.services.config_service import ConfigService as _CS
+
+                    _CS.get_instance().update_cloud_secrets(config.secrets.cloud.to_dict())
+
+            with self._status_lock:
+                self._start_time = time.time()
+            trainer.train()
+        except Exception:
+            if config.cloud.enabled:
+                with suppress(Exception):
+                    from web.backend.services.config_service import ConfigService as _CS
+
+                    _CS.get_instance().update_cloud_secrets(config.secrets.cloud.to_dict())
+
+            error_caught = True
+            traceback.print_exc()
+        finally:
+            with suppress(Exception):
+                trainer.end()
+
+        del trainer
+
+        with self._status_lock:
+            self._training_thread = None
+            self._training_commands = None
+            self._training_callbacks = None
+
+        with suppress(Exception):
+            import torch
+
+            torch.clear_autocast_cache()
+        with suppress(Exception):
+            from modules.util.torch_util import torch_gc
+
+            torch_gc()
+
+        if error_caught:
+            with self._status_lock:
+                self._status = "error"
+                self._error_message = "Training failed -- check the Terminal panel for details"
+                self._start_time = None
+            self._broadcast({"type": "status", "data": {"text": "Error: check the Terminal panel for details"}})
+        else:
+            with self._status_lock:
+                self._status = "idle"
+                self._error_message = None
+                self._start_time = None
+            self._broadcast({"type": "status", "data": {"text": "Stopped"}})
+
+        if config.tensorboard_always_on:
+            with suppress(Exception):
+                self._start_always_on_tensorboard()
+
+    def stop_training(self) -> dict:
+        with self._status_lock:
+            if self._status != "running":
+                return {"ok": False, "error": "Training is not running"}
+            self._status = "stopping"
+            self._error_message = None
+            commands = self._training_commands
+
+        self._broadcast({"type": "status", "data": {"text": "Stopping..."}})
+
+        if commands is not None:
+            with suppress(Exception):
+                commands.stop()
+
+        return {"ok": True}
+
+    def sample_now(self) -> dict:
+        with self._status_lock:
+            commands = self._training_commands
+        if commands is None:
+            return {"ok": False, "error": "Training is not running"}
+        with suppress(Exception):
+            commands.sample_default()
+        return {"ok": True}
+
+    def sample_custom(self, sample_params: Any) -> dict:
+        with self._status_lock:
+            commands = self._training_commands
+        if commands is None:
+            return {"ok": False, "error": "Training is not running"}
+        with suppress(Exception):
+            commands.sample_custom(sample_params)
+        return {"ok": True}
+
+    def backup_now(self) -> dict:
+        with self._status_lock:
+            commands = self._training_commands
+        if commands is None:
+            return {"ok": False, "error": "Training is not running"}
+        with suppress(Exception):
+            commands.backup()
+        return {"ok": True}
+
+    def save_now(self) -> dict:
+        with self._status_lock:
+            commands = self._training_commands
+        if commands is None:
+            return {"ok": False, "error": "Training is not running"}
+        with suppress(Exception):
+            commands.save()
+        return {"ok": True}
+
+    def _on_update_train_progress(self, train_progress: Any, max_step: int, max_epoch: int) -> None:
+        self._broadcast({
+            "type": "progress",
+            "data": {
+                "epoch": train_progress.epoch,
+                "epoch_step": train_progress.epoch_step,
+                "epoch_sample": train_progress.epoch_sample,
+                "global_step": train_progress.global_step,
+                "max_step": max_step,
+                "max_epoch": max_epoch,
+            },
+        })
+
+    def _on_update_status(self, status_text: str) -> None:
+        self._broadcast({"type": "status", "data": {"text": status_text}})
+
+    def _on_sample_default(self, sampler_output: Any) -> None:
+        with suppress(Exception):
+            payload = serialize_sample(sampler_output)
+            self._broadcast({"type": "sample", "data": payload})
+
+    def _on_update_sample_default_progress(self, step: int, max_step: int) -> None:
+        self._broadcast({
+            "type": "sample_progress",
+            "data": {"step": step, "max_step": max_step},
+        })
+
+    def _on_sample_custom(self, sampler_output: Any) -> None:
+        with suppress(Exception):
+            payload = serialize_sample(sampler_output)
+            self._broadcast({"type": "sample", "data": payload})
+
+    def _on_update_sample_custom_progress(self, step: int, max_step: int) -> None:
+        self._broadcast({
+            "type": "sample_progress",
+            "data": {"step": step, "max_step": max_step},
+        })
+
+    _always_on_tensorboard_subprocess: Any = None
+
+    def _start_always_on_tensorboard(self) -> None:
+        import os
+        import subprocess
+        import sys
+
+        self.stop_always_on_tensorboard()
+
+        config = ConfigService.get_instance().config
+
+        tensorboard_executable = os.path.join(os.path.dirname(sys.executable), "tensorboard")
+        tensorboard_log_dir = os.path.join(config.workspace_dir, "tensorboard")
+        os.makedirs(os.path.abspath(tensorboard_log_dir), exist_ok=True)
+
+        args = [
+            tensorboard_executable,
+            "--logdir", tensorboard_log_dir,
+            "--port", str(config.tensorboard_port),
+            "--samples_per_plugin=images=100,scalars=10000",
+        ]
+
+        if config.tensorboard_expose:
+            args.append("--bind_all")
+
+        try:
+            self.__class__._always_on_tensorboard_subprocess = subprocess.Popen(args)
+        except Exception:
+            self.__class__._always_on_tensorboard_subprocess = None
+
+    def stop_always_on_tensorboard(self) -> None:
+        import subprocess
+
+        proc = self.__class__._always_on_tensorboard_subprocess
+        if proc is not None:
+            try:
+                proc.terminate()
+                proc.wait(timeout=5)
+            except subprocess.TimeoutExpired:
+                proc.kill()
+            except Exception:
+                pass
+            finally:
+                self.__class__._always_on_tensorboard_subprocess = None
diff --git a/web/backend/services/video_service.py b/web/backend/services/video_service.py
new file mode 100644
index 000000000..4832e631e
--- /dev/null
+++ b/web/backend/services/video_service.py
@@ -0,0 +1,683 @@
+import concurrent.futures
+import logging
+import math
+import os
+import pathlib
+import random
+import shlex
+import subprocess
+import threading
+from typing import Literal
+
+from web.backend.services._singleton import SingletonMixin
+
+logger = logging.getLogger(__name__)
+
+VideoStatus = Literal["idle", "running", "completed", "error"]
+
+SUPPORTED_VIDEO_EXTENSIONS = {".webm", ".mkv", ".flv", ".avi", ".mov", ".wmv", ".mp4", ".mpeg", ".m4v"}
+
+ALLOWED_YTDLP_FLAGS = {
+    "--quiet",
+    "-q",
+    "--no-warnings",
+    "--progress",
+    "--no-progress",
+    "--format",
+    "-f",
+    "--merge-output-format",
+    "--write-subs",
+    "--sub-lang",
+    "--sub-format",
+    "--embed-subs",
+    "--no-playlist",
+    "--playlist-items",
+    "--no-overwrites",
+    "--restrict-filenames",
+    "--trim-filenames",
+    "--recode-video",
+    "--remux-video",
+    "--write-thumbnail",
+    "--convert-thumbnails",
+}
+
+
+class VideoService(SingletonMixin):
+    def __init__(self) -> None:
+        self._status: VideoStatus = "idle"
+        self._message: str | None = None
+        self._error: str | None = None
+        self._thread: threading.Thread | None = None
+        self._lock = threading.Lock()
+
+    def _set_status(self, status: VideoStatus, message: str | None = None, error: str | None = None) -> None:
+        with self._lock:
+            self._status = status
+            self._message = message
+            self._error = error
+
+    def get_status(self) -> dict:
+        with self._lock:
+            return {
+                "status": self._status,
+                "message": self._message,
+                "error": self._error,
+            }
+
+    @staticmethod
+    def _import_cv2():
+        try:
+            import cv2
+
+            return cv2
+        except ImportError as exc:
+            raise RuntimeError(
+                "opencv-python (cv2) is required for video tools. Install it with:  pip install opencv-python"
+            ) from exc
+
+    @staticmethod
+    def _import_scenedetect():
+        try:
+            import scenedetect
+
+            return scenedetect
+        except ImportError as exc:
+            raise RuntimeError(
+                "scenedetect is required for scene-based clip splitting. "
+                "Install it with:  pip install scenedetect[opencv]"
+            ) from exc
+
+    def _get_vid_paths(self, batch_mode: bool, video_path: str, directory: str) -> list[pathlib.Path]:
+        cv2 = self._import_cv2()
+        input_videos: list[pathlib.Path] = []
+
+        if not batch_mode:
+            path = pathlib.Path(video_path)
+            if not path.is_file():
+                raise ValueError(f"No file specified, or invalid file path: {video_path}")
+            vid = cv2.VideoCapture(str(path))
+            ok = False
+            try:
+                if vid.isOpened():
+                    ok, _ = vid.read()
+            finally:
+                vid.release()
+            if not ok:
+                raise ValueError(f"Invalid video file: {video_path}")
+            return [path]
+        else:
+            if not directory or not pathlib.Path(directory).is_dir():
+                raise ValueError(f"Invalid input directory: {directory}")
+            lower_exts = {e.lower() for e in SUPPORTED_VIDEO_EXTENSIONS}
+            for path in pathlib.Path(directory).rglob("*"):
+                if path.is_file() and path.suffix.lower() in lower_exts:
+                    vid = cv2.VideoCapture(str(path))
+                    ok = False
+                    try:
+                        if vid.isOpened():
+                            ok, _ = vid.read()
+                    finally:
+                        vid.release()
+                    if ok:
+                        input_videos.append(path)
+            logger.info("Found %d videos to process", len(input_videos))
+            return input_videos
+
+    @staticmethod
+    def _get_random_aspect(height: int, width: int, variation: float) -> tuple[int, int, int, int]:
+        if variation == 0:
+            return 0, height, 0, width
+
+        old_aspect = height / width
+        variation_scaled = old_aspect * variation
+        if old_aspect > 1.2:
+            new_aspect = min(
+                4.0,
+                max(
+                    1.0,
+                    random.triangular(
+                        old_aspect - (variation_scaled * 1.5), old_aspect + (variation_scaled / 2), old_aspect
+                    ),
+                ),
+            )
+        elif old_aspect < 0.85:
+            new_aspect = max(
+                0.25,
+                min(
+                    1.0,
+                    random.triangular(
+                        old_aspect - (variation_scaled / 2), old_aspect + (variation_scaled * 1.5), old_aspect
+                    ),
+                ),
+            )
+        else:
+            new_aspect = random.triangular(old_aspect - variation_scaled, old_aspect + variation_scaled)
+
+        new_aspect = round(new_aspect, 2)
+        if new_aspect > old_aspect:
+            new_height = int(height)
+            new_width = int(width * (old_aspect / new_aspect))
+        elif new_aspect < old_aspect:
+            new_height = int(height * (new_aspect / old_aspect))
+            new_width = int(width)
+        else:
+            new_height = int(height)
+            new_width = int(width)
+
+        position_x = random.randint(0, max(width - new_width, 0))
+        position_y = random.randint(0, max(height - new_height, 0))
+        return position_y, new_height, position_x, new_width
+
+    def _find_main_contour(self, frame):
+        cv2 = self._import_cv2()
+        frame_grayscale = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+        _, frame_thresh = cv2.threshold(frame_grayscale, 15, 255, cv2.THRESH_BINARY)
+        frame_contours, _ = cv2.findContours(frame_thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+        if frame_contours:
+            frame_maincontour = max(frame_contours, key=cv2.contourArea)
+            x1, y1, w1, h1 = cv2.boundingRect(frame_maincontour)
+        else:
+            x1 = 0
+            y1 = 0
+            h1, w1, _ = frame.shape
+        if not frame_contours or h1 < 10 or w1 < 10:
+            x1 = 0
+            y1 = 0
+            h1, w1, _ = frame.shape
+        return x1, y1, w1, h1
+
+    @staticmethod
+    def _parse_timestamp_to_frames(timestamp: str, fps: float) -> int:
+        parts = timestamp.split(":")
+        seconds = sum(int(x) * 60**i for i, x in enumerate(reversed(parts)))
+        return int(seconds * fps)
+
+    def extract_clips(
+        self,
+        video_path: str,
+        directory: str,
+        batch_mode: bool,
+        output_dir: str,
+        time_start: str,
+        time_end: str,
+        output_subdirectories: bool,
+        split_at_cuts: bool,
+        max_length: float,
+        fps: int,
+        remove_borders: bool,
+        crop_variation: float,
+    ) -> dict:
+        if not output_dir or not pathlib.Path(output_dir).is_dir():
+            return {"ok": False, "error": f"Invalid output directory: {output_dir}"}
+        if max_length <= 0.25:
+            return {"ok": False, "error": "Max Length of clips must be > 0.25 seconds."}
+        if fps < 0:
+            return {"ok": False, "error": "Target FPS must be a positive integer (or 0 to skip fps re-encoding)."}
+        if not (0.0 <= crop_variation < 1.0):
+            return {"ok": False, "error": "Crop Variation must be between 0.0 and 1.0."}
+
+        with self._lock:
+            if self._status == "running":
+                return {"ok": False, "error": "A video operation is already running"}
+            self._status = "running"
+            self._message = "Starting clip extraction..."
+            self._error = None
+
+        def _run():
+            try:
+                input_videos = self._get_vid_paths(batch_mode, video_path, directory)
+                if len(input_videos) == 0:
+                    self._set_status("error", error="No valid video files found.")
+                    return
+
+                with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
+                    for vpath in input_videos:
+                        if output_subdirectories and batch_mode:
+                            out = os.path.join(output_dir, os.path.splitext(os.path.relpath(vpath, directory))[0])
+                        elif output_subdirectories and not batch_mode:
+                            out = os.path.join(output_dir, os.path.splitext(os.path.basename(vpath))[0])
+                        else:
+                            out = output_dir
+
+                        ts_start = "00:00:00" if batch_mode else time_start
+                        ts_end = "99:99:99" if batch_mode else time_end
+                        executor.submit(
+                            self._extract_clips_single,
+                            str(vpath),
+                            ts_start,
+                            ts_end,
+                            max_length,
+                            split_at_cuts,
+                            remove_borders,
+                            crop_variation,
+                            fps,
+                            out,
+                        )
+
+                msg = (
+                    f"Clip extraction from all videos in {directory} complete"
+                    if batch_mode
+                    else f"Clip extraction from {video_path} complete"
+                )
+                self._set_status("completed", message=msg)
+                logger.info(msg)
+            except Exception as exc:
+                self._set_status("error", error=str(exc))
+                logger.exception("Clip extraction failed")
+
+        thread = threading.Thread(target=_run, daemon=True, name="video-extract-clips")
+        self._thread = thread
+        thread.start()
+        return {"ok": True, "message": "Clip extraction started"}
+
+    def _extract_clips_single(
+        self,
+        video_path: str,
+        timestamp_min: str,
+        timestamp_max: str,
+        max_length: float,
+        split_at_cuts: bool,
+        remove_borders: bool,
+        crop_variation: float,
+        target_fps: int,
+        output_dir: str,
+    ) -> None:
+        cv2 = self._import_cv2()
+        video = cv2.VideoCapture(video_path)
+        fps = video.get(cv2.CAP_PROP_FPS) or 0.0
+        if fps <= 0:
+            logger.warning("Could not read FPS for '%s'. Falling back to 30 FPS.", os.path.basename(video_path))
+            fps = 30.0
+
+        max_length_frames = int(max_length * fps)
+        min_length_frames = max(int(0.25 * fps), 1)
+        total_frames = int(video.get(cv2.CAP_PROP_FRAME_COUNT)) or 0
+        timestamp_max_frame = self._parse_timestamp_to_frames(timestamp_max, fps)
+        timestamp_max_frame = min(timestamp_max_frame, max(total_frames - 1, 0))
+        timestamp_min_frame = self._parse_timestamp_to_frames(timestamp_min, fps)
+        timestamp_min_frame = min(timestamp_min_frame, timestamp_max_frame)
+
+        if split_at_cuts:
+            scenedetect = self._import_scenedetect()
+            timecode_list = scenedetect.detect(
+                str(video_path),
+                scenedetect.AdaptiveDetector(),
+                start_time=int(timestamp_min_frame),
+                end_time=int(timestamp_max_frame),
+            )
+            scene_list = [(x[0].get_frames(), x[1].get_frames()) for x in timecode_list]
+            if len(scene_list) == 0:
+                scene_list = [(timestamp_min_frame, timestamp_max_frame)]
+        else:
+            scene_list = [(timestamp_min_frame, timestamp_max_frame)]
+
+        scene_list_split: list[tuple[int, int]] = []
+        for scene in scene_list:
+            length = scene[1] - scene[0]
+            if length > max_length_frames:
+                n = math.ceil(length / max_length_frames)
+                new_length = int(length / n)
+                new_splits = list(range(scene[0], scene[1] + min_length_frames, new_length))
+                scene_list_split.extend(
+                    (new_splits[i], new_splits[i + 1])
+                    for i in range(len(new_splits) - 1)
+                    if new_splits[i + 1] - new_splits[i] > min_length_frames
+                )
+            else:
+                if length > (min_length_frames + 2):
+                    scene_list_split.append((scene[0] + 1, scene[1] - 1))
+
+        logger.info(
+            "Video '%s' being split into %d clips in %s...",
+            os.path.basename(video_path),
+            len(scene_list_split),
+            output_dir,
+        )
+
+        with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
+            for scene in scene_list_split:
+                executor.submit(
+                    self._save_clip,
+                    scene,
+                    video_path,
+                    target_fps,
+                    remove_borders,
+                    crop_variation,
+                    output_dir,
+                )
+
+        video.release()
+
+    def _save_clip(
+        self,
+        scene: tuple[int, int],
+        video_path: str,
+        target_fps: int,
+        remove_borders: bool,
+        crop_variation: float,
+        output_dir: str,
+    ) -> None:
+        cv2 = self._import_cv2()
+        fourcc = cv2.VideoWriter_fourcc(*"mp4v")
+        basename, _ext = os.path.splitext(os.path.basename(video_path))
+        video = cv2.VideoCapture(str(video_path))
+        fps = video.get(cv2.CAP_PROP_FPS) or 0.0
+        if fps <= 0:
+            fps = 30.0
+        os.makedirs(output_dir, exist_ok=True)
+        output_name = os.path.join(output_dir, f"{basename}_{scene[0]}-{scene[1]}")
+        output_ext = ".mp4"
+
+        video.set(cv2.CAP_PROP_POS_FRAMES, (scene[1] + scene[0]) // 2)
+        success, frame = video.read()
+        if not success or frame is None:
+            logger.warning(
+                "Failed to read frame from '%s' at midpoint. Skipping clip.",
+                os.path.basename(video_path),
+            )
+            video.release()
+            return
+
+        if remove_borders:
+            frame_blend = frame
+            for i in range(5):
+                random_frame = random.randint(scene[0], scene[1])
+                video.set(cv2.CAP_PROP_POS_FRAMES, random_frame)
+                success, frame = video.read()
+                if not success or frame is None:
+                    continue
+                a = 1 / (i + 1)
+                b = 1 - a
+                frame_blend = cv2.addWeighted(frame, a, frame_blend, b, 0)
+            x1, y1, w1, h1 = self._find_main_contour(frame_blend)
+        else:
+            x1 = 0
+            y1 = 0
+            h1, w1, _ = frame.shape
+
+        y2, h2, x2, w2 = self._get_random_aspect(h1, w1, crop_variation)
+        writer = cv2.VideoWriter(output_name + output_ext, fourcc, fps, (w2, h2))
+        video.set(cv2.CAP_PROP_POS_FRAMES, scene[0])
+        frame_number = int(video.get(cv2.CAP_PROP_POS_FRAMES))
+        success, frame = video.read()
+
+        while success and (frame_number < scene[1]):
+            frame_trimmed = frame[y1 : y1 + h1, x1 : x1 + w1]
+            writer.write(frame_trimmed[y2 : y2 + h2, x2 : x2 + w2])
+            success, frame = video.read()
+            frame_number += 1
+        writer.release()
+        video.release()
+
+        if target_fps > 0:
+            if int(round(fps)) == target_fps:
+                return
+            cmd = [
+                "ffmpeg",
+                "-y",
+                "-i",
+                f"{output_name}{output_ext}",
+                "-filter:v",
+                f"fps={target_fps}",
+                "-an",
+                f"{output_name}_{target_fps}fps{output_ext}",
+            ]
+            proc = subprocess.run(cmd, stderr=subprocess.DEVNULL, stdout=subprocess.DEVNULL)
+            if proc.returncode == 0:
+                try:
+                    os.remove(output_name + output_ext)
+                except OSError:
+                    logger.warning("Failed to remove placeholder %s", output_name + output_ext)
+
+    def extract_images(
+        self,
+        video_path: str,
+        directory: str,
+        batch_mode: bool,
+        output_dir: str,
+        time_start: str,
+        time_end: str,
+        output_subdirectories: bool,
+        images_per_second: float,
+        blur_removal: float,
+        remove_borders: bool,
+        crop_variation: float,
+    ) -> dict:
+        if not output_dir or not pathlib.Path(output_dir).is_dir():
+            return {"ok": False, "error": f"Invalid output directory: {output_dir}"}
+        if images_per_second <= 0:
+            return {"ok": False, "error": "Images/sec must be > 0."}
+        if not (0.0 <= blur_removal < 1.0):
+            return {"ok": False, "error": "Blur Removal must be between 0.0 and 1.0."}
+        if not (0.0 <= crop_variation < 1.0):
+            return {"ok": False, "error": "Crop Variation must be between 0.0 and 1.0."}
+
+        with self._lock:
+            if self._status == "running":
+                return {"ok": False, "error": "A video operation is already running"}
+            self._status = "running"
+            self._message = "Starting image extraction..."
+            self._error = None
+
+        def _run():
+            try:
+                input_videos = self._get_vid_paths(batch_mode, video_path, directory)
+                if len(input_videos) == 0:
+                    self._set_status("error", error="No valid video files found.")
+                    return
+
+                with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
+                    for vpath in input_videos:
+                        if output_subdirectories and batch_mode:
+                            out = os.path.join(output_dir, os.path.splitext(os.path.relpath(vpath, directory))[0])
+                        elif output_subdirectories and not batch_mode:
+                            out = os.path.join(output_dir, os.path.splitext(os.path.basename(vpath))[0])
+                        else:
+                            out = output_dir
+
+                        ts_start = "00:00:00" if batch_mode else time_start
+                        ts_end = "99:99:99" if batch_mode else time_end
+                        executor.submit(
+                            self._save_frames,
+                            str(vpath),
+                            ts_start,
+                            ts_end,
+                            images_per_second,
+                            blur_removal,
+                            remove_borders,
+                            crop_variation,
+                            out,
+                        )
+
+                msg = (
+                    f"Image extraction from all videos in {directory} complete"
+                    if batch_mode
+                    else f"Image extraction from {video_path} complete"
+                )
+                self._set_status("completed", message=msg)
+                logger.info(msg)
+            except Exception as exc:
+                self._set_status("error", error=str(exc))
+                logger.exception("Image extraction failed")
+
+        thread = threading.Thread(target=_run, daemon=True, name="video-extract-images")
+        self._thread = thread
+        thread.start()
+        return {"ok": True, "message": "Image extraction started"}
+
+    def _save_frames(
+        self,
+        video_path: str,
+        timestamp_min: str,
+        timestamp_max: str,
+        capture_rate: float,
+        blur_threshold: float,
+        remove_borders: bool,
+        crop_variation: float,
+        output_dir: str,
+    ) -> None:
+        cv2 = self._import_cv2()
+        video = cv2.VideoCapture(video_path)
+        fps = video.get(cv2.CAP_PROP_FPS) or 0.0
+        if fps <= 0:
+            logger.warning("Could not read FPS for '%s'. Falling back to 30 FPS.", os.path.basename(video_path))
+            fps = 30.0
+        if capture_rate <= 0:
+            video.release()
+            return
+
+        image_rate = max(int(fps / capture_rate), 1)
+        total_frames = int(video.get(cv2.CAP_PROP_FRAME_COUNT)) or 0
+        timestamp_max_frame = self._parse_timestamp_to_frames(timestamp_max, fps)
+        timestamp_max_frame = min(timestamp_max_frame, max(total_frames - 1, 0))
+        timestamp_min_frame = self._parse_timestamp_to_frames(timestamp_min, fps)
+        timestamp_min_frame = min(timestamp_min_frame, timestamp_max_frame)
+        frame_range = range(timestamp_min_frame, timestamp_max_frame, image_rate)
+        frame_list: list[int] = []
+
+        for n in frame_range:
+            frame_idx = abs(int(random.triangular(n - (image_rate / 2), n + (image_rate / 2))))
+            frame_idx = max(0, min(frame_idx, max(total_frames - 1, 0)))
+            frame_list.append(frame_idx)
+
+        logger.info(
+            "Video '%s' will be split into %d images in %s...",
+            os.path.basename(video_path),
+            len(frame_list),
+            output_dir,
+        )
+
+        output_list: list[tuple[int, float]] = []
+        for f in frame_list:
+            video.set(cv2.CAP_PROP_POS_FRAMES, f)
+            success, frame = video.read()
+            if success and frame is not None:
+                frame_grayscale = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+                frame_sharpness = cv2.Laplacian(frame_grayscale, cv2.CV_64F).var()
+                output_list.append((f, frame_sharpness))
+
+        if not output_list:
+            logger.warning("No frames extracted from %s in the selected range.", os.path.basename(video_path))
+            video.release()
+            return
+
+        output_list_sorted = sorted(output_list, key=lambda x: x[1])
+        cutoff = int(blur_threshold * len(output_list_sorted))
+        output_list_cut = output_list_sorted[cutoff:]
+        logger.info("%d blurriest images have been dropped from %s", cutoff, os.path.basename(video_path))
+
+        basename, _ext = os.path.splitext(os.path.basename(video_path))
+        os.makedirs(output_dir, exist_ok=True)
+
+        for f_idx, _sharpness in output_list_cut:
+            filename = os.path.join(output_dir, f"{basename}_{f_idx}.jpg")
+            video.set(cv2.CAP_PROP_POS_FRAMES, f_idx)
+            success, frame = video.read()
+
+            if remove_borders and success and frame is not None:
+                x1, y1, w1, h1 = self._find_main_contour(frame)
+                frame_cropped = frame[y1 : y1 + h1, x1 : x1 + w1]
+            else:
+                frame_cropped = frame if success and frame is not None else None
+                if frame_cropped is not None:
+                    x1 = 0
+                    y1 = 0
+                    h1, w1, _ = frame_cropped.shape
+
+            if frame_cropped is not None:
+                y2, h2, x2, w2 = self._get_random_aspect(h1, w1, crop_variation)
+                cv2.imwrite(filename, frame_cropped[y2 : y2 + h2, x2 : x2 + w2])
+        video.release()
+
+    def download_videos(
+        self,
+        url: str,
+        link_list_path: str,
+        batch_mode: bool,
+        output_dir: str,
+        additional_args: str,
+    ) -> dict:
+        if not output_dir or not pathlib.Path(output_dir).is_dir():
+            return {"ok": False, "error": f"Invalid output directory: {output_dir}"}
+
+        if additional_args and additional_args.strip():
+            try:
+                self._validate_ytdlp_args(shlex.split(additional_args.strip()))
+            except ValueError as exc:
+                return {"ok": False, "error": str(exc)}
+
+        if not batch_mode:
+            if not url or not url.strip():
+                return {"ok": False, "error": "No URL specified."}
+            ydl_urls = [url.strip()]
+        else:
+            ydl_path = pathlib.Path(link_list_path)
+            if not ydl_path.is_file() or ydl_path.suffix.lower() != ".txt":
+                return {"ok": False, "error": f"Invalid link list file: {link_list_path}"}
+            with open(ydl_path) as file:
+                ydl_urls = [line.strip() for line in file.readlines() if line.strip()]
+            if not ydl_urls:
+                return {"ok": False, "error": "Link list file is empty."}
+
+        with self._lock:
+            if self._status == "running":
+                return {"ok": False, "error": "A video operation is already running"}
+            self._status = "running"
+            self._message = f"Downloading {len(ydl_urls)} video(s)..."
+            self._error = None
+
+        def _run():
+            try:
+                with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
+                    for u in ydl_urls:
+                        executor.submit(self._download_single, u, output_dir, additional_args)
+
+                msg = f"Completed {len(ydl_urls)} download(s)."
+                self._set_status("completed", message=msg)
+                logger.info(msg)
+            except Exception as exc:
+                self._set_status("error", error=str(exc))
+                logger.exception("Download failed")
+
+        thread = threading.Thread(target=_run, daemon=True, name="video-download")
+        self._thread = thread
+        thread.start()
+        return {"ok": True, "message": f"Downloading {len(ydl_urls)} video(s)..."}
+
+    @staticmethod
+    def _validate_ytdlp_args(args_list: list[str]) -> list[str]:
+        rejected: list[str] = []
+        for arg in args_list:
+            flag = arg.split("=", 1)[0] if arg.startswith("-") else arg
+            if flag.startswith("-") and flag not in ALLOWED_YTDLP_FLAGS:
+                rejected.append(flag)
+        if rejected:
+            raise ValueError(
+                f"yt-dlp flag(s) not allowed: {', '.join(rejected)}. "
+                f"Only the following flags are permitted: {', '.join(sorted(ALLOWED_YTDLP_FLAGS))}"
+            )
+        return args_list
+
+    @staticmethod
+    def _download_single(url: str, output_dir: str, additional_args: str) -> None:
+        url = (url or "").strip()
+        if not url:
+            logger.warning("Empty URL, skipping download.")
+            return
+
+        args_list = shlex.split(additional_args.strip()) if additional_args and additional_args.strip() else []
+
+        try:
+            VideoService._validate_ytdlp_args(args_list)
+        except ValueError as exc:
+            logger.error("Blocked yt-dlp arguments: %s", exc)
+            return
+
+        # "--" stops yt-dlp's argparse-based CLI from ever interpreting `url` as a flag.
+        cmd = ["yt-dlp", "--ignore-config", "-o", "%(title)s.%(ext)s", "-P", output_dir] + args_list + ["--", url]
+
+        logger.info("Downloading %s...", url)
+        proc = subprocess.run(cmd, capture_output=True, text=True)
+        if proc.returncode != 0:
+            logger.warning("yt-dlp exited %d for %s: %s", proc.returncode, url, proc.stderr[:500])
+        logger.info("Download %s done!", url)
diff --git a/web/backend/utils/__init__.py b/web/backend/utils/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/backend/utils/gpu_info.py b/web/backend/utils/gpu_info.py
new file mode 100644
index 000000000..5a117ee98
--- /dev/null
+++ b/web/backend/utils/gpu_info.py
@@ -0,0 +1,200 @@
+from __future__ import annotations
+
+import logging
+import threading
+from contextlib import suppress
+from typing import TypedDict
+
+logger = logging.getLogger(__name__)
+
+_nvml_initialized: bool = False
+_nvml_available: bool = False
+_nvml_init_lock = threading.Lock()
+
+
+class GpuStaticInfo(TypedDict):
+    index: int
+    name: str
+    vram_total_mb: float
+
+
+class GpuMetrics(TypedDict):
+    index: int
+    name: str
+    vram_used_mb: float
+    vram_total_mb: float
+    vram_percent: float
+    temperature: float | None
+    utilization: float | None
+
+
+def _ensure_nvml() -> bool:
+    global _nvml_initialized, _nvml_available  # noqa: PLW0603
+
+    if _nvml_initialized:
+        return _nvml_available
+
+    with _nvml_init_lock:
+        if _nvml_initialized:
+            return _nvml_available
+
+        try:
+            import pynvml
+
+            pynvml.nvmlInit()
+            _nvml_available = True
+            logger.info("pynvml initialised successfully")
+        except Exception:  # noqa: BLE001
+            _nvml_available = False
+            logger.debug("pynvml not available, will try torch.cuda fallback")
+        finally:
+            _nvml_initialized = True
+
+    return _nvml_available
+
+
+def get_gpu_static_info() -> list[GpuStaticInfo]:
+    if _ensure_nvml():
+        try:
+            return _static_info_nvml()
+        except Exception:  # noqa: BLE001
+            pass
+
+    try:
+        return _static_info_torch()
+    except Exception:  # noqa: BLE001
+        return []
+
+
+def _static_info_nvml() -> list[GpuStaticInfo]:
+    import pynvml
+
+    device_count = pynvml.nvmlDeviceGetCount()
+    gpus: list[GpuStaticInfo] = []
+    for i in range(device_count):
+        handle = pynvml.nvmlDeviceGetHandleByIndex(i)
+        name = pynvml.nvmlDeviceGetName(handle)
+        if isinstance(name, bytes):
+            name = name.decode("utf-8")
+        mem_info = pynvml.nvmlDeviceGetMemoryInfo(handle)
+        gpus.append(
+            GpuStaticInfo(
+                index=i,
+                name=name,
+                vram_total_mb=round(mem_info.total / (1024**2), 1),
+            )
+        )
+    return gpus
+
+
+def _static_info_torch() -> list[GpuStaticInfo]:
+    import torch
+
+    if not torch.cuda.is_available():
+        return []
+
+    gpus: list[GpuStaticInfo] = []
+    for i in range(torch.cuda.device_count()):
+        props = torch.cuda.get_device_properties(i)
+        gpus.append(
+            GpuStaticInfo(
+                index=i,
+                name=props.name,
+                vram_total_mb=round(props.total_memory / (1024**2), 1),
+            )
+        )
+    return gpus
+
+
+def get_gpu_metrics() -> list[GpuMetrics]:
+    if _ensure_nvml():
+        try:
+            return _metrics_nvml()
+        except Exception:  # noqa: BLE001
+            logger.debug("pynvml metrics failed, trying torch.cuda fallback")
+
+    try:
+        return _metrics_torch()
+    except Exception:  # noqa: BLE001
+        pass
+
+    return []
+
+
+def _metrics_nvml() -> list[GpuMetrics]:
+    import pynvml
+
+    device_count = pynvml.nvmlDeviceGetCount()
+    gpus: list[GpuMetrics] = []
+
+    for i in range(device_count):
+        try:
+            handle = pynvml.nvmlDeviceGetHandleByIndex(i)
+            name = pynvml.nvmlDeviceGetName(handle)
+            if isinstance(name, bytes):
+                name = name.decode("utf-8")
+
+            mem_info = pynvml.nvmlDeviceGetMemoryInfo(handle)
+            vram_used_mb = round(mem_info.used / (1024**2), 1)
+            vram_total_mb = round(mem_info.total / (1024**2), 1)
+            vram_percent = round((mem_info.used / mem_info.total) * 100, 1) if mem_info.total > 0 else 0.0
+
+            temperature: float | None = None
+            with suppress(Exception):
+                temperature = float(pynvml.nvmlDeviceGetTemperature(handle, pynvml.NVML_TEMPERATURE_GPU))
+
+            utilization: float | None = None
+            with suppress(Exception):
+                util_rates = pynvml.nvmlDeviceGetUtilizationRates(handle)
+                utilization = float(util_rates.gpu)
+
+            gpus.append(
+                GpuMetrics(
+                    index=i,
+                    name=name,
+                    vram_used_mb=vram_used_mb,
+                    vram_total_mb=vram_total_mb,
+                    vram_percent=vram_percent,
+                    temperature=temperature,
+                    utilization=utilization,
+                )
+            )
+        except Exception:  # noqa: BLE001, PERF203
+            logger.debug("Failed to read GPU %d via pynvml", i)
+
+    return gpus
+
+
+def _metrics_torch() -> list[GpuMetrics]:
+    import torch
+
+    if not torch.cuda.is_available():
+        return []
+
+    device_count = torch.cuda.device_count()
+    gpus: list[GpuMetrics] = []
+
+    for i in range(device_count):
+        try:
+            name = torch.cuda.get_device_name(i)
+            mem_allocated = torch.cuda.memory_allocated(i)
+            mem_total = torch.cuda.get_device_properties(i).total_memory
+            vram_used_mb = round(mem_allocated / (1024**2), 1)
+            vram_total_mb = round(mem_total / (1024**2), 1)
+            vram_percent = round((mem_allocated / mem_total) * 100, 1) if mem_total > 0 else 0.0
+
+            gpus.append(
+                GpuMetrics(
+                    index=i,
+                    name=name,
+                    vram_used_mb=vram_used_mb,
+                    vram_total_mb=vram_total_mb,
+                    vram_percent=vram_percent,
+                    temperature=None,
+                    utilization=None,
+                )
+            )
+        except Exception:  # noqa: BLE001, PERF203
+            logger.debug("Failed to read GPU %d via torch.cuda", i)
+
+    return gpus
diff --git a/web/backend/utils/path_security.py b/web/backend/utils/path_security.py
new file mode 100644
index 000000000..158cf2f09
--- /dev/null
+++ b/web/backend/utils/path_security.py
@@ -0,0 +1,123 @@
+import os
+
+from fastapi import HTTPException
+
+_BLOCKED_NAMES = {
+    ".git",
+    ".env",
+    "__pycache__",
+    "secrets.json",
+    "node_modules",
+    ".ssh",
+    ".aws",
+    ".azure",
+    ".gcloud",
+    ".gnupg",
+    ".gnome-keyring",
+    ".kube",
+    ".docker",
+    ".npmrc",
+    ".netrc",
+    ".pgpass",
+    ".password-store",
+    ".git-credentials",
+    "id_rsa",
+    "id_dsa",
+    "id_ecdsa",
+    "id_ed25519",
+    "known_hosts",
+    "authorized_keys",
+    "shadow",
+    "passwd",
+    "sam",
+    "system",
+    "ntds.dit",
+    "wallet.dat",
+    ".bash_history",
+    ".zsh_history",
+    ".python_history",
+}
+
+_BLOCKED_PREFIXES = (
+    ".env",
+    "id_rsa",
+    "id_dsa",
+    "id_ecdsa",
+    "id_ed25519",
+)
+
+_BLOCKED_SUFFIXES = {
+    ".pyc",
+    ".pyo",
+    ".key",
+    ".pem",
+    ".ppk",
+    ".pfx",
+    ".p12",
+    ".p8",
+    ".jks",
+    ".keystore",
+    ".asc",
+    ".gpg",
+    ".kdbx",
+    ".ovpn",
+}
+
+
+def base_match(canonical: str, base: str) -> bool:
+    canonical = os.path.normpath(canonical)
+    base = os.path.normpath(base)
+
+    if os.name == "nt":
+        canonical = canonical.lower()
+        base = base.lower()
+
+    base_clean = base.rstrip(os.sep)
+    canon_clean = canonical.rstrip(os.sep)
+
+    if canon_clean == base_clean:
+        return True
+
+    return canonical.startswith(base_clean + os.sep)
+
+
+def validate_path(
+    user_path: str,
+    *,
+    must_exist: bool = True,
+    allow_file: bool = True,
+    allow_dir: bool = True,
+) -> str:
+    if not user_path or not user_path.strip():
+        raise HTTPException(status_code=400, detail="Empty path")
+
+    try:
+        canonical = os.path.realpath(user_path)
+    except (OSError, ValueError) as exc:
+        raise HTTPException(status_code=400, detail=f"Invalid path: {exc}") from exc
+
+    if must_exist:
+        if not os.path.exists(canonical):
+            raise HTTPException(status_code=404, detail="Path not found")
+        if not allow_file and os.path.isfile(canonical):
+            raise HTTPException(status_code=400, detail="Expected directory, got file")
+        if not allow_dir and os.path.isdir(canonical):
+            raise HTTPException(status_code=400, detail="Expected file, got directory")
+
+    parts = os.path.normpath(canonical).split(os.sep)
+    for part in parts:
+        part_lower = part.lower()
+        if part_lower in _BLOCKED_NAMES or part_lower.startswith(_BLOCKED_PREFIXES):
+            raise HTTPException(
+                status_code=403,
+                detail=f"Access denied: path contains restricted component '{part}'",
+            )
+
+    _, ext = os.path.splitext(canonical)
+    if ext.lower() in _BLOCKED_SUFFIXES:
+        raise HTTPException(
+            status_code=403,
+            detail=f"Access denied: file type '{ext}' is restricted",
+        )
+
+    return canonical
diff --git a/web/backend/ws/__init__.py b/web/backend/ws/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/backend/ws/connection_manager.py b/web/backend/ws/connection_manager.py
new file mode 100644
index 000000000..1a689d169
--- /dev/null
+++ b/web/backend/ws/connection_manager.py
@@ -0,0 +1,81 @@
+import asyncio
+import logging
+from contextlib import suppress
+
+from fastapi import WebSocket
+
+logger = logging.getLogger(__name__)
+
+
+class ConnectionManager:
+    def __init__(self, name: str = "WebSocket") -> None:
+        self._connections: list[WebSocket] = []
+        self._lock: asyncio.Lock | None = None
+        self._name = name
+
+    def _get_lock(self) -> asyncio.Lock:
+        if self._lock is None:
+            self._lock = asyncio.Lock()
+        return self._lock
+
+    async def connect(self, websocket: WebSocket) -> None:
+        await websocket.accept()
+        async with self._get_lock():
+            self._connections.append(websocket)
+        logger.info("%s client connected (%s total)", self._name, len(self._connections))
+
+    async def disconnect(self, websocket: WebSocket) -> None:
+        async with self._get_lock():
+            with suppress(ValueError):
+                self._connections.remove(websocket)
+        logger.info("%s client disconnected (%s remaining)", self._name, len(self._connections))
+
+    async def broadcast(self, message: dict) -> None:
+        async with self._get_lock():
+            stale: list[WebSocket] = []
+            for ws in self._connections:
+                try:
+                    await ws.send_json(message)
+                except Exception:  # noqa: BLE001, PERF203
+                    stale.append(ws)
+
+            for ws in stale:
+                with suppress(ValueError):
+                    self._connections.remove(ws)
+
+            if stale:
+                logger.debug("Removed %d stale %s connection(s)", len(stale), self._name)
+
+    @property
+    def active_count(self) -> int:
+        return len(self._connections)
+
+
+class BroadcastBridge:
+    def __init__(self, manager: ConnectionManager, name: str = "broadcast") -> None:
+        self._manager = manager
+        self._name = name
+        self._event_loop: asyncio.AbstractEventLoop | None = None
+
+    def capture_event_loop(self) -> None:
+        if self._event_loop is None:
+            try:
+                self._event_loop = asyncio.get_running_loop()
+            except RuntimeError:
+                logger.warning("No running event loop found when capturing for %s", self._name)
+
+    def broadcast_sync(self, message: dict) -> None:
+        if self._manager.active_count == 0:
+            return
+
+        loop = self._event_loop
+        if loop is not None and loop.is_running():
+            future = asyncio.run_coroutine_threadsafe(self._manager.broadcast(message), loop)
+            future.add_done_callback(self._done_callback)
+        else:
+            logger.debug("No active event loop — dropping %s message", self._name)
+
+    def _done_callback(self, future: asyncio.Future) -> None:
+        exc = future.exception()
+        if exc is not None:
+            logger.error("Error in %s broadcast: %s", self._name, exc, exc_info=exc)
diff --git a/web/backend/ws/system_ws.py b/web/backend/ws/system_ws.py
new file mode 100644
index 000000000..c0e3dbd0d
--- /dev/null
+++ b/web/backend/ws/system_ws.py
@@ -0,0 +1,35 @@
+import asyncio
+import logging
+
+from web.backend.ws.connection_manager import ConnectionManager
+
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
+
+logger = logging.getLogger(__name__)
+
+METRICS_INTERVAL_S = 1.0
+
+manager = ConnectionManager(name="System metrics WebSocket")
+
+router = APIRouter()
+
+
+@router.websocket("/ws/system")
+async def system_ws(websocket: WebSocket) -> None:
+    await manager.connect(websocket)
+
+    from web.backend.services.monitor_service import MonitorService
+
+    monitor = MonitorService.get_instance()
+
+    try:
+        while True:
+            metrics = await asyncio.to_thread(monitor.get_metrics)
+            await websocket.send_json({"type": "metrics", "data": metrics})
+            await asyncio.sleep(METRICS_INTERVAL_S)
+    except WebSocketDisconnect:
+        pass
+    except Exception:  # noqa: BLE001
+        logger.debug("System metrics WebSocket connection closed unexpectedly")
+    finally:
+        await manager.disconnect(websocket)
diff --git a/web/backend/ws/terminal_ws.py b/web/backend/ws/terminal_ws.py
new file mode 100644
index 000000000..70f4e9dfb
--- /dev/null
+++ b/web/backend/ws/terminal_ws.py
@@ -0,0 +1,40 @@
+import asyncio
+import logging
+from contextlib import suppress
+
+from web.backend.ws.connection_manager import BroadcastBridge, ConnectionManager
+
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
+
+logger = logging.getLogger(__name__)
+
+manager = ConnectionManager(name="Terminal WebSocket")
+bridge = BroadcastBridge(manager, name="terminal")
+broadcast_sync = bridge.broadcast_sync
+
+router = APIRouter()
+
+
+@router.websocket("/ws/terminal")
+async def terminal_ws(websocket: WebSocket) -> None:
+    await manager.connect(websocket)
+    bridge.capture_event_loop()
+
+    from web.backend.services.log_service import LogService
+
+    svc = LogService.get_instance()
+    svc.set_ws_broadcast(broadcast_sync)
+    svc.set_event_loop(asyncio.get_running_loop())
+
+    history = svc.get_history()
+    for entry in history:
+        with suppress(Exception):
+            await websocket.send_json({"type": "log", "data": entry})
+
+    try:
+        while True:
+            await websocket.receive_text()
+    except WebSocketDisconnect:
+        pass
+    finally:
+        await manager.disconnect(websocket)
diff --git a/web/backend/ws/training_ws.py b/web/backend/ws/training_ws.py
new file mode 100644
index 000000000..80a3b597b
--- /dev/null
+++ b/web/backend/ws/training_ws.py
@@ -0,0 +1,32 @@
+import logging
+
+from web.backend.ws.connection_manager import BroadcastBridge, ConnectionManager
+
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
+
+logger = logging.getLogger(__name__)
+
+manager = ConnectionManager(name="Training WebSocket")
+bridge = BroadcastBridge(manager, name="training")
+broadcast_sync = bridge.broadcast_sync
+
+router = APIRouter()
+
+
+@router.websocket("/ws/training")
+async def training_ws(websocket: WebSocket) -> None:
+    await manager.connect(websocket)
+    bridge.capture_event_loop()
+
+    from web.backend.services.trainer_service import TrainerService
+
+    TrainerService.get_instance().set_ws_broadcast(broadcast_sync)
+
+    try:
+        while True:
+            data = await websocket.receive_text()
+            logger.debug("Received client message on training WS: %s", data)
+    except WebSocketDisconnect:
+        pass
+    finally:
+        await manager.disconnect(websocket)
diff --git a/web/gui/.gitignore b/web/gui/.gitignore
new file mode 100644
index 000000000..f4e2c6d6b
--- /dev/null
+++ b/web/gui/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+*.tsbuildinfo
diff --git a/web/gui/.prettierrc.json b/web/gui/.prettierrc.json
new file mode 100644
index 000000000..49bbd58dd
--- /dev/null
+++ b/web/gui/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "jsxSingleQuote": false
+}
diff --git a/web/gui/electron-builder.yml b/web/gui/electron-builder.yml
new file mode 100644
index 000000000..111880f49
--- /dev/null
+++ b/web/gui/electron-builder.yml
@@ -0,0 +1,62 @@
+appId: com.onetrainer.app
+productName: OneTrainer
+copyright: Copyright © 2024-2026 OneTrainer Contributors
+
+directories:
+  output: release
+
+files:
+  - dist/**/*
+  - node_modules/**/*
+  - "!node_modules/**/*.map"
+  - "!node_modules/**/test/**"
+  - "!node_modules/**/tests/**"
+  - "!node_modules/**/*.md"
+
+extraResources:
+  - from: ../../modules/
+    to: modules/
+    filter:
+      - "**/*"
+      - "!**/__pycache__/**"
+      - "!**/*.pyc"
+  - from: ../../scripts/
+    to: scripts/
+    filter:
+      - "**/*"
+      - "!**/__pycache__/**"
+      - "!**/*.pyc"
+  - from: ../../training_presets/
+    to: training_presets/
+    filter:
+      - "**/*.json"
+  - from: ../backend/
+    to: web/backend/
+    filter:
+      - "**/*.py"
+  - from: ../../requirements.txt
+    to: requirements.txt
+
+win:
+  target:
+    - target: portable
+      arch:
+        - x64
+  icon: ../../resources/icons/icon.ico
+
+mac:
+  target:
+    - target: dmg
+      arch:
+        - x64
+        - arm64
+  icon: ../../resources/icons/icon.png
+  category: public.app-category.developer-tools
+
+linux:
+  target:
+    - target: AppImage
+      arch:
+        - x64
+  icon: ../../resources/icons/icon.png
+  category: Development
diff --git a/web/gui/eslint.config.js b/web/gui/eslint.config.js
new file mode 100644
index 000000000..3cc7bfb2c
--- /dev/null
+++ b/web/gui/eslint.config.js
@@ -0,0 +1,51 @@
+import js from "@eslint/js";
+import prettier from "eslint-plugin-prettier/recommended";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  react.configs.flat.recommended,
+  react.configs.flat["jsx-runtime"],
+  prettier,
+  {
+    settings: {
+      react: { version: "detect" },
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+
+      "object-shorthand": ["error", "always"],
+      "prefer-template": "error",
+
+      "no-useless-return": "error",
+      "no-useless-concat": "error",
+      "no-useless-rename": "error",
+
+      "no-unneeded-ternary": "error",
+
+      "@typescript-eslint/array-type": ["error", { default: "array-simple" }],
+    },
+  },
+  {
+    files: ["scripts/**/*.mjs"],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+  {
+    ignores: ["dist/", "node_modules/", "e2e/", "src/renderer/types/generated/"],
+  },
+);
diff --git a/web/gui/index.html b/web/gui/index.html
new file mode 100644
index 000000000..8c8e6557f
--- /dev/null
+++ b/web/gui/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: http://localhost:* http://127.0.0.1:* https://github.com https://*.githubusercontent.com https://image.civitai.com https://i.imgur.com;"
+    />
+    <title>OneTrainer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <script>
+      (function(){
+        var t = localStorage.getItem('theme');
+        if (!t) t = matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';
+        document.body.setAttribute('data-theme', t);
+      })();
+    </script>
+    <div id="root"></div>
+    <script type="module" src="/src/renderer/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/gui/package.json b/web/gui/package.json
new file mode 100644
index 000000000..1c3a2c35c
--- /dev/null
+++ b/web/gui/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "onetrainer",
+  "version": "0.1.0",
+  "description": "Electron-based Javascript interface for OneTrainer",
+  "license": "AGPL-3.0-only",
+  "type": "module",
+  "main": "dist/main/main/index.cjs",
+  "scripts": {
+    "dev": "vite",
+    "generate-types": "node ../scripts/run_generate_types.js",
+    "copy:splash": "node -e \"require('fs').cpSync('src/main/splash.html','dist/main/main/splash.html')\"",
+    "rename:cjs": "node scripts/rename-cjs.mjs",
+    "dev:electron": "tsc -p tsconfig.main.json && npm run copy:splash && npm run rename:cjs && concurrently -k --names \"vite,electron\" -c \"cyan,green\" \"vite\" \"electron .\"",
+    "build": "vite build",
+    "build:main": "tsc -p tsconfig.main.json && npm run copy:splash && npm run rename:cjs",
+    "build:electron": "npm run generate-types && tsc -p tsconfig.main.json && npm run copy:splash && npm run rename:cjs && vite build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+    "preview": "vite preview",
+    "start": "electron ."
+  },
+  "build": {
+    "extends": "electron-builder.yml"
+  },
+  "dependencies": {
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
+    "dompurify": "^3.3.1",
+    "immer": "^10.1.1",
+    "lucide-react": "^0.511.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zustand": "^5.0.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.27.0",
+    "@tailwindcss/vite": "^4.2.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/node": "^22.15.0",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "concurrently": "^9.1.2",
+    "electron": "^40.6.0",
+    "electron-builder": "^26.8.1",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "prettier": "^3.8.2",
+    "tailwindcss": "^4.2.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.0",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/web/gui/scripts/rename-cjs.mjs b/web/gui/scripts/rename-cjs.mjs
new file mode 100644
index 000000000..b3080e998
--- /dev/null
+++ b/web/gui/scripts/rename-cjs.mjs
@@ -0,0 +1,48 @@
+// Renames tsc's .js output to .cjs so Node loads it as CommonJS — package.json
+// sets "type": "module", which would otherwise treat .js as ESM and refuse the
+// emitted require()/exports syntax. Shared files are duplicated (.js kept for
+// any future ESM consumer, .cjs produced for the main/preload loader).
+import { copyFileSync, readdirSync, readFileSync, renameSync, writeFileSync } from "fs";
+import { join } from "path";
+
+const distMain = new URL("../dist/main", import.meta.url).pathname.replace(/^\/([A-Z]:)/, "$1");
+
+function walk(dir) {
+  const entries = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) entries.push(...walk(full));
+    else entries.push(full);
+  }
+  return entries;
+}
+
+const allJsFiles = walk(distMain).filter((f) => f.endsWith(".js"));
+const sharedDir = join(distMain, "shared");
+
+const mainFiles = [];
+const sharedFiles = [];
+
+for (const f of allJsFiles) {
+  if (f.startsWith(sharedDir)) sharedFiles.push(f);
+  else mainFiles.push(f);
+}
+
+for (const file of mainFiles) {
+  let content = readFileSync(file, "utf8");
+  content = content.replace(/require\("(\.[^"]+?)"\)/g, (match, p1) => {
+    if (p1.endsWith(".json") || p1.endsWith(".html") || p1.endsWith(".node")) return match;
+    return `require("${p1}.cjs")`;
+  });
+  writeFileSync(file, content, "utf8");
+}
+
+for (const file of sharedFiles) {
+  copyFileSync(file, file.replace(/\.js$/, ".cjs"));
+}
+
+for (const file of mainFiles) {
+  renameSync(file, file.replace(/\.js$/, ".cjs"));
+}
+
+console.log(`Main: ${mainFiles.length} renamed to .cjs | Shared: ${sharedFiles.length} duplicated (.js + .cjs)`);
diff --git a/web/gui/src/main/index.ts b/web/gui/src/main/index.ts
new file mode 100644
index 000000000..a09f51569
--- /dev/null
+++ b/web/gui/src/main/index.ts
@@ -0,0 +1,698 @@
+import { type ChildProcess, execSync, spawn } from "child_process";
+import { randomBytes, randomUUID } from "crypto";
+import { app, BrowserWindow, dialog, type FileFilter, ipcMain, Menu, shell } from "electron";
+import * as fs from "fs";
+import * as http from "http";
+import * as path from "path";
+
+import { IPC_CHANNELS } from "../shared/ipc-channels";
+import { closeSplash, createSplashWindow, showSplashError, updateSplash } from "./splash";
+
+const isWindows = process.platform === "win32";
+let BACKEND_PORT = 8000;
+let BACKEND_URL = `http://127.0.0.1:${BACKEND_PORT}`;
+let HEALTH_URL = `${BACKEND_URL}/api/health`;
+
+function setBackendPort(port: number): void {
+  BACKEND_PORT = port;
+  BACKEND_URL = `http://127.0.0.1:${port}`;
+  HEALTH_URL = `${BACKEND_URL}/api/health`;
+}
+
+function findFreePort(start: number): Promise<number> {
+  return new Promise((resolve) => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const net = require("net") as typeof import("net");
+    const server = net.createServer();
+    server.listen(start, "127.0.0.1", () => {
+      const port = (server.address() as import("net").AddressInfo).port;
+      server.close(() => resolve(port));
+    });
+    server.on("error", () => {
+      resolve(findFreePort(start + 1));
+    });
+  });
+}
+
+const HEALTH_POLL_INTERVAL = 500;
+const MAX_HEALTH_RETRIES = 120;
+const DEFAULT_DEV_SERVER_PORT = 5173;
+
+// vite.config.ts's writeResolvedPortPlugin writes the port Vite actually bound
+// to here once it starts listening -- Vite auto-increments past 5173 when
+// that port is taken, and this is how a separate process (us) finds out.
+const VITE_PORT_FILE = path.resolve(__dirname, "..", "..", "..", ".vite-port");
+
+async function resolveDevServerPort(timeoutMs = 10000): Promise<number> {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    try {
+      const contents = fs.readFileSync(VITE_PORT_FILE, "utf-8").trim();
+      const port = Number.parseInt(contents, 10);
+      if (Number.isInteger(port) && port > 0) return port;
+    } catch {
+      // File not written yet -- keep polling until the dev server starts.
+    }
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  return DEFAULT_DEV_SERVER_PORT;
+}
+
+let DEV_SERVER_URL = `http://127.0.0.1:${DEFAULT_DEV_SERVER_PORT}`;
+
+// When run_web.bat / run_web_dev.bat start the backend externally,
+// they set this env var so Electron doesn't spawn a duplicate.
+const externalBackend = process.env.OT_EXTERNAL_BACKEND === "1";
+const devMode = process.env.OT_DEV === "1" || process.argv.includes("--dev");
+
+// Disable Chromium GPU compositing — the UI is form-based and PyTorch needs the VRAM.
+app.disableHardwareAcceleration();
+Menu.setApplicationMenu(null);
+
+let mainWindow: BrowserWindow | null = null;
+let backendProcess: ChildProcess | null = null;
+const shutdownToken = randomBytes(32).toString("hex");
+
+function getProjectRoot(): string {
+  let dir = __dirname;
+  for (let i = 0; i < 10; i++) {
+    if (fs.existsSync(path.join(dir, "pyproject.toml"))) return dir;
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  throw new Error(`Could not locate project root (no pyproject.toml found above ${__dirname})`);
+}
+
+function getAppIcon(): string {
+  const root = getProjectRoot();
+  return isWindows
+    ? path.join(root, "resources", "icons", "icon.ico")
+    : path.join(root, "resources", "icons", "icon.png");
+}
+
+function findPython(): string {
+  const projectRoot = getProjectRoot();
+  const venvPaths = isWindows
+    ? [
+        path.join(projectRoot, "venv", "Scripts", "python.exe"),
+        path.join(projectRoot, ".venv", "Scripts", "python.exe"),
+      ]
+    : [path.join(projectRoot, "venv", "bin", "python"), path.join(projectRoot, ".venv", "bin", "python")];
+
+  for (const p of venvPaths) {
+    if (fs.existsSync(p)) {
+      console.log(`[Electron] Found Python at: ${p}`);
+      return p;
+    }
+  }
+
+  const fallback = isWindows ? "python" : "python3";
+  console.log(`[Electron] No venv found, falling back to: ${fallback}`);
+  return fallback;
+}
+
+function killProcessTree(proc: ChildProcess | null): void {
+  if (!proc || proc.killed) return;
+  try {
+    if (isWindows) {
+      execSync(`taskkill /PID ${proc.pid} /T /F`, {
+        windowsHide: true,
+        stdio: "ignore",
+      });
+    } else {
+      const pid = proc.pid;
+      if (pid === undefined) return;
+      // Try to kill the process group first (negative PID)
+      try {
+        process.kill(-pid, "SIGTERM");
+      } catch {
+        process.kill(pid, "SIGTERM");
+      }
+      setTimeout(() => {
+        try {
+          process.kill(pid, "SIGKILL");
+        } catch {
+          /* already dead */
+        }
+      }, 2000);
+    }
+  } catch {
+    try {
+      proc.kill();
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+function killStaleBackend(): void {
+  try {
+    if (isWindows) {
+      const output = execSync(`netstat -ano | findstr ":${BACKEND_PORT} " | findstr "LISTENING"`, {
+        windowsHide: true,
+        encoding: "utf8",
+        timeout: 5000,
+      });
+      const pids = new Set<string>();
+      for (const line of output.trim().split("\n")) {
+        const pid = line.trim().split(/\s+/).pop();
+        if (pid && /^\d+$/.test(pid) && pid !== "0") pids.add(pid);
+      }
+      for (const pid of pids) {
+        console.log(`[Electron] Killing stale process on port ${BACKEND_PORT} (PID ${pid})`);
+        try {
+          execSync(`taskkill /PID ${pid} /T /F`, {
+            windowsHide: true,
+            stdio: "ignore",
+          });
+        } catch {
+          /* already dead */
+        }
+      }
+    } else {
+      execSync(`fuser -k ${BACKEND_PORT}/tcp 2>/dev/null || true`, {
+        encoding: "utf8",
+        timeout: 5000,
+        stdio: "ignore",
+      });
+    }
+  } catch {
+    // No process on port -- expected for clean starts
+  }
+}
+
+function startBackend(): ChildProcess | null {
+  if (backendProcess && !backendProcess.killed) {
+    killProcessTree(backendProcess);
+  }
+
+  killStaleBackend();
+
+  const projectRoot = getProjectRoot();
+  const python = findPython();
+
+  // Only pass --reload for an explicit `--dev` launch (devMode). Plain
+  // start-web-ui.bat/.sh runs are unpackaged too (app.isPackaged is false
+  // whenever running via `electron .`), so gating on devMode instead of
+  // isPackaged keeps normal launches from paying for file-watching.
+  const reloadArgs = devMode ? ["--reload", "--reload-dir", path.join(projectRoot, "web", "backend")] : [];
+
+  const proc = spawn(
+    python,
+    [
+      "-m",
+      "uvicorn",
+      "web.backend.main:app",
+      "--host",
+      "127.0.0.1",
+      "--port",
+      String(BACKEND_PORT),
+      "--log-level",
+      "info",
+      ...reloadArgs,
+    ],
+    {
+      cwd: projectRoot,
+      stdio: ["ignore", "pipe", "pipe"],
+      env: {
+        ...process.env,
+        PYTHONUNBUFFERED: "1",
+        OT_SHUTDOWN_TOKEN: shutdownToken,
+        OT_ELECTRON: "1",
+      },
+      ...(isWindows ? { windowsHide: true } : { detached: true }),
+    },
+  );
+
+  attachBackendHandlers(proc);
+  return proc;
+}
+
+const NOISY_LOG_RE =
+  /GET \/api\/health|GET \/api\/presets|GET \/api\/config|GET \/api\/training\/status|WebSocket \/ws\//;
+
+function attachBackendHandlers(proc: ChildProcess): void {
+  proc.stdout?.on("data", (data: Buffer) => {
+    const line = data.toString();
+    if (!devMode && NOISY_LOG_RE.test(line)) return;
+    process.stdout.write(`[Backend] ${line}`);
+  });
+
+  proc.stderr?.on("data", (data: Buffer) => {
+    const line = data.toString();
+    if (!devMode && NOISY_LOG_RE.test(line)) return;
+    process.stderr.write(`[Backend] ${line}`);
+  });
+
+  proc.on("close", (code) => {
+    console.log(`[Backend] Process exited with code ${code}`);
+    backendProcess = null;
+  });
+}
+
+function checkHealth(): Promise<boolean> {
+  return new Promise((resolve) => {
+    const req = http.get(HEALTH_URL, (res) => {
+      resolve(res.statusCode !== undefined && res.statusCode >= 200 && res.statusCode < 500);
+    });
+    req.on("error", () => resolve(false));
+    req.setTimeout(2000, () => {
+      req.destroy();
+      resolve(false);
+    });
+  });
+}
+
+async function waitForBackend(onProgress?: (attempt: number, maxAttempts: number) => void): Promise<boolean> {
+  for (let i = 0; i < MAX_HEALTH_RETRIES; i++) {
+    const healthy = await checkHealth();
+    if (healthy) {
+      console.log(`[Electron] Backend is ready (attempt ${i + 1})`);
+      return true;
+    }
+    if (devMode) console.log(`[Electron] Waiting for backend... (${i + 1}/${MAX_HEALTH_RETRIES})`);
+    if (onProgress) onProgress(i + 1, MAX_HEALTH_RETRIES);
+    await new Promise((r) => setTimeout(r, HEALTH_POLL_INTERVAL));
+  }
+  console.error("[Electron] Backend failed to start within timeout");
+  return false;
+}
+
+function flushWindow(win: BrowserWindow, timeoutMs = 3000): Promise<void> {
+  if (win.isDestroyed() || win.webContents.isDestroyed()) return Promise.resolve();
+
+  return new Promise<void>((resolve) => {
+    const requestId = randomUUID();
+
+    const timer = setTimeout(() => {
+      ipcMain.removeListener(IPC_CHANNELS.FLUSH_COMPLETE, onComplete);
+      console.warn(`[Electron] Flush timed out after ${timeoutMs}ms for window ${win.id}`);
+      resolve();
+    }, timeoutMs);
+
+    const onComplete = (_event: Electron.IpcMainEvent, id: string) => {
+      if (id !== requestId) return;
+      clearTimeout(timer);
+      ipcMain.removeListener(IPC_CHANNELS.FLUSH_COMPLETE, onComplete);
+      resolve();
+    };
+
+    ipcMain.on(IPC_CHANNELS.FLUSH_COMPLETE, onComplete);
+    try {
+      win.webContents.send(IPC_CHANNELS.FLUSH_REQUEST, requestId);
+    } catch (err) {
+      console.warn(`[Electron] Failed to send flush request: ${String(err)}`);
+      clearTimeout(timer);
+      ipcMain.removeListener(IPC_CHANNELS.FLUSH_COMPLETE, onComplete);
+      resolve();
+    }
+  });
+}
+
+function createWindow(): Promise<BrowserWindow> {
+  return new Promise((resolve) => {
+    const win = new BrowserWindow({
+      width: 1400,
+      height: 1000,
+      minWidth: 1024,
+      minHeight: 700,
+      title: "OneTrainer",
+      icon: getAppIcon(),
+      show: false,
+      webPreferences: {
+        preload: path.join(__dirname, "preload.cjs"),
+        contextIsolation: true,
+        nodeIntegration: false,
+        // Electron's default sandboxed preload loader can't require() relative
+        // files — it'd break our shared/ipc-channels import. contextIsolation
+        // plus nodeIntegration:false is still the real renderer security
+        // boundary; disabling sandbox just lets the preload use full Node.
+        sandbox: false,
+      },
+    });
+    mainWindow = win;
+
+    const rendererPath = path.join(__dirname, "..", "..", "renderer", "index.html");
+    // Only probe the Vite dev server on an explicit `--dev` launch -- a plain
+    // start-web-ui.bat/.sh run is unpackaged too, but should always load the
+    // built renderer rather than attempt (and hot-reload from) a dev server.
+    const isDev = devMode && !app.isPackaged;
+    if (isDev) {
+      new Promise<boolean>((probeResolve) => {
+        const req = http.get(DEV_SERVER_URL, () => probeResolve(true));
+        req.on("error", () => probeResolve(false));
+        req.setTimeout(500, () => {
+          req.destroy();
+          probeResolve(false);
+        });
+      }).then((devServerUp) => {
+        if (devServerUp) {
+          win.loadURL(`${DEV_SERVER_URL}?backendPort=${BACKEND_PORT}${devMode ? "&dev=1" : ""}`);
+        } else {
+          win.loadFile(rendererPath, {
+            query: { backendPort: String(BACKEND_PORT), ...(devMode ? { dev: "1" } : {}) },
+          });
+        }
+      });
+      if (process.env.OT_DEVTOOLS === "1") {
+        win.webContents.openDevTools();
+      }
+    } else {
+      win.loadFile(rendererPath, {
+        query: { backendPort: String(BACKEND_PORT), ...(devMode ? { dev: "1" } : {}) },
+      });
+    }
+
+    win.webContents.on("will-navigate", (event, url) => {
+      const parsed = new URL(url);
+      if (parsed.hostname === "localhost") return;
+      event.preventDefault();
+      shell.openExternal(url);
+    });
+
+    win.webContents.setWindowOpenHandler(({ url }) => {
+      shell.openExternal(url);
+      return { action: "deny" };
+    });
+
+    const loadTimeout = setTimeout(() => {
+      console.warn("[Electron] Main window ready-to-show timeout, resolving anyway");
+      resolve(win);
+    }, 30000);
+
+    win.once("ready-to-show", () => {
+      clearTimeout(loadTimeout);
+      resolve(win);
+    });
+
+    win.on("closed", () => {
+      mainWindow = null;
+    });
+
+    let didFlush = false;
+    win.on("close", (event) => {
+      if (didFlush) return;
+      event.preventDefault();
+      void (async () => {
+        try {
+          await flushWindow(win);
+        } finally {
+          didFlush = true;
+          if (!win.isDestroyed()) win.destroy();
+        }
+      })();
+    });
+  });
+}
+
+function registerIpcHandlers(): void {
+  ipcMain.handle(IPC_CHANNELS.OPEN_FILE, async (_event, filters?: FileFilter[]) => {
+    if (!mainWindow) return null;
+    const result = await dialog.showOpenDialog(mainWindow, {
+      properties: ["openFile"],
+      filters: filters ?? [],
+    });
+    return result.canceled ? null : result.filePaths[0];
+  });
+
+  ipcMain.handle(IPC_CHANNELS.OPEN_DIRECTORY, async () => {
+    if (!mainWindow) return null;
+    const result = await dialog.showOpenDialog(mainWindow, {
+      properties: ["openDirectory"],
+    });
+    return result.canceled ? null : result.filePaths[0];
+  });
+
+  ipcMain.handle(IPC_CHANNELS.SAVE_FILE, async (_event, defaultPath?: string, filters?: FileFilter[]) => {
+    if (!mainWindow) return null;
+    const result = await dialog.showSaveDialog(mainWindow, {
+      defaultPath,
+      filters: filters ?? [],
+    });
+    return result.canceled ? null : result.filePath;
+  });
+
+  ipcMain.handle(IPC_CHANNELS.GET_APP_PATH, () => {
+    return app.getAppPath();
+  });
+
+  ipcMain.handle(IPC_CHANNELS.RESTART_BACKEND, async () => {
+    if (externalBackend) {
+      console.log("[Electron] Backend is externally managed; waiting for it to come back...");
+      return waitForBackend();
+    }
+
+    console.log("[Electron] Restarting backend...");
+    killProcessTree(backendProcess);
+    backendProcess = startBackend();
+    if (!backendProcess) return false;
+    return waitForBackend();
+  });
+
+  ipcMain.handle(IPC_CHANNELS.GET_PLATFORM_INFO, () => {
+    return {
+      platform: process.platform,
+      isPackaged: app.isPackaged,
+      version: app.getVersion(),
+      projectRoot: getProjectRoot(),
+    };
+  });
+
+  ipcMain.handle(IPC_CHANNELS.GET_BACKEND_PORT, () => {
+    return BACKEND_PORT;
+  });
+
+  ipcMain.handle(IPC_CHANNELS.OPEN_MASK_EDITOR, async (_event, folder?: string) => {
+    const rendererPath = path.join(__dirname, "..", "..", "renderer", "index.html");
+    const isDev = devMode && !app.isPackaged;
+    const folderParam = folder ? `&folder=${encodeURIComponent(folder)}` : "";
+
+    const editorWindow = new BrowserWindow({
+      width: 1600,
+      height: 1000,
+      minWidth: 1200,
+      minHeight: 800,
+      title: "Mask Editor - OneTrainer",
+      icon: getAppIcon(),
+      webPreferences: {
+        preload: path.join(__dirname, "preload.cjs"),
+        contextIsolation: true,
+        nodeIntegration: false,
+        sandbox: false,
+      },
+    });
+
+    if (isDev) {
+      const devServerUp = await new Promise<boolean>((probeResolve) => {
+        const req = http.get(DEV_SERVER_URL, () => probeResolve(true));
+        req.on("error", () => probeResolve(false));
+        req.setTimeout(500, () => {
+          req.destroy();
+          probeResolve(false);
+        });
+      });
+      if (devServerUp) {
+        editorWindow.loadURL(`${DEV_SERVER_URL}?backendPort=${BACKEND_PORT}&route=mask-editor${folderParam}`);
+      } else {
+        editorWindow.loadFile(rendererPath, {
+          query: {
+            backendPort: String(BACKEND_PORT),
+            route: "mask-editor",
+            ...(folder ? { folder } : {}),
+          },
+        });
+      }
+    } else {
+      editorWindow.loadFile(rendererPath, {
+        query: {
+          backendPort: String(BACKEND_PORT),
+          route: "mask-editor",
+          ...(folder ? { folder } : {}),
+        },
+      });
+    }
+
+    editorWindow.webContents.on("will-navigate", (event, url) => {
+      const parsed = new URL(url);
+      if (parsed.hostname === "localhost") return;
+      event.preventDefault();
+      shell.openExternal(url);
+    });
+
+    editorWindow.webContents.setWindowOpenHandler(({ url }) => {
+      shell.openExternal(url);
+      return { action: "deny" };
+    });
+
+    return true;
+  });
+}
+
+function isProcessAlive(proc: ChildProcess | null): boolean {
+  if (!proc || proc.killed || proc.pid === undefined) return false;
+  try {
+    process.kill(proc.pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function gracefulShutdownBackend(timeoutMs = 8000): Promise<void> {
+  if (!backendProcess || backendProcess.killed) return;
+
+  console.log("[Electron] Requesting graceful backend shutdown...");
+  try {
+    await new Promise<void>((resolve) => {
+      const req = http.request(
+        {
+          hostname: "localhost",
+          port: BACKEND_PORT,
+          path: "/api/shutdown",
+          method: "POST",
+          headers: {
+            "Content-Length": 0,
+            "x-shutdown-token": shutdownToken,
+          },
+        },
+        (res) => {
+          res.resume();
+          resolve();
+        },
+      );
+      req.on("error", () => resolve());
+      req.setTimeout(3000, () => {
+        req.destroy();
+        resolve();
+      });
+      req.end("");
+    });
+  } catch {
+    console.log("[Electron] Backend unreachable, skipping graceful shutdown");
+    killProcessTree(backendProcess);
+    return;
+  }
+
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeoutMs) {
+    if (!isProcessAlive(backendProcess)) {
+      console.log("[Electron] Backend exited gracefully");
+      return;
+    }
+    await new Promise((r) => setTimeout(r, 250));
+  }
+
+  console.log("[Electron] Backend did not exit within grace period, force-killing");
+  killProcessTree(backendProcess);
+}
+
+let cleanupPromise: Promise<void> | null = null;
+
+function cleanupAndQuit(): Promise<void> {
+  if (cleanupPromise) return cleanupPromise;
+
+  cleanupPromise = (async () => {
+    if (!externalBackend) {
+      await gracefulShutdownBackend(8000);
+    }
+  })();
+
+  return cleanupPromise;
+}
+
+async function main(): Promise<void> {
+  await app.whenReady();
+  registerIpcHandlers();
+  createSplashWindow();
+
+  if (!externalBackend) {
+    updateSplash(2, 8, "Finding available port...");
+    const port = await findFreePort(8000);
+    setBackendPort(port);
+    if (port !== 8000) {
+      console.log(`[Electron] Port 8000 busy, using port ${port}`);
+    }
+    updateSplash(2, 8, `Starting backend server on port ${port}...`);
+    console.log("[Electron] Starting backend...");
+    backendProcess = startBackend();
+    if (!backendProcess) {
+      console.error("[Electron] Failed to spawn backend process");
+      showSplashError("Failed to start backend process");
+      setTimeout(() => app.quit(), 3000);
+      return;
+    }
+    updateSplash(2, 12, "Backend process started");
+  } else {
+    updateSplash(2, 12, "Using external backend...");
+    console.log("[Electron] OT_EXTERNAL_BACKEND=1 -- skipping backend spawn");
+  }
+
+  updateSplash(3, 15, "Waiting for backend...");
+  console.log("[Electron] Waiting for backend to start...");
+
+  const healthy = await waitForBackend((attempt, maxAttempts) => {
+    const progress = Math.min(15 + (attempt / maxAttempts) * 60, 75);
+    updateSplash(3, progress, `Loading... ${Math.round(progress)}%`);
+  });
+
+  if (!healthy) {
+    console.error("[Electron] Backend failed to start within timeout");
+    showSplashError("Backend failed to start (60s timeout)");
+    if (!externalBackend) {
+      killProcessTree(backendProcess);
+    }
+    setTimeout(() => app.quit(), 5000);
+    return;
+  }
+
+  console.log("[Electron] Backend is healthy");
+  updateSplash(4, 80, "Loading interface...");
+
+  if (devMode && !app.isPackaged) {
+    const port = await resolveDevServerPort();
+    DEV_SERVER_URL = `http://127.0.0.1:${port}`;
+    if (port !== DEFAULT_DEV_SERVER_PORT) {
+      console.log(`[Electron] Vite dev server on port ${port} (default ${DEFAULT_DEV_SERVER_PORT} was busy)`);
+    }
+  }
+
+  const window = await createWindow();
+  updateSplash(5, 95, "Almost ready...");
+
+  await closeSplash(window);
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+}
+
+app.on("window-all-closed", () => {
+  cleanupAndQuit().finally(() => {
+    if (process.platform !== "darwin") {
+      app.quit();
+    }
+  });
+});
+
+app.on("will-quit", (event) => {
+  if (cleanupPromise) {
+    event.preventDefault();
+    cleanupPromise.finally(() => {
+      cleanupPromise = null;
+      app.quit();
+    });
+  }
+});
+
+process.on("uncaughtException", (err) => {
+  console.error("[Electron] Uncaught exception:", err);
+  if (!externalBackend) {
+    killProcessTree(backendProcess);
+  }
+  app.quit();
+});
+
+main().catch(console.error);
diff --git a/web/gui/src/main/preload.ts b/web/gui/src/main/preload.ts
new file mode 100644
index 000000000..5a5fbd057
--- /dev/null
+++ b/web/gui/src/main/preload.ts
@@ -0,0 +1,31 @@
+import { contextBridge, ipcRenderer } from "electron";
+
+import type { ElectronAPI } from "../shared/electron-api";
+import { IPC_CHANNELS } from "../shared/ipc-channels";
+
+export type { ElectronAPI, PlatformInfo } from "../shared/electron-api";
+
+contextBridge.exposeInMainWorld("electronAPI", {
+  isElectron: true,
+  platform: process.platform,
+  openFile: (filters?) => ipcRenderer.invoke(IPC_CHANNELS.OPEN_FILE, filters),
+  openDirectory: () => ipcRenderer.invoke(IPC_CHANNELS.OPEN_DIRECTORY),
+  saveFile: (defaultPath?, filters?) => ipcRenderer.invoke(IPC_CHANNELS.SAVE_FILE, defaultPath, filters),
+  getAppPath: () => ipcRenderer.invoke(IPC_CHANNELS.GET_APP_PATH),
+  restartBackend: () => ipcRenderer.invoke(IPC_CHANNELS.RESTART_BACKEND),
+  getPlatformInfo: () => ipcRenderer.invoke(IPC_CHANNELS.GET_PLATFORM_INFO),
+  getBackendPort: () => ipcRenderer.invoke(IPC_CHANNELS.GET_BACKEND_PORT),
+  openMaskEditor: (folder?) => ipcRenderer.invoke(IPC_CHANNELS.OPEN_MASK_EDITOR, folder),
+  onFlushRequest: (handler) => {
+    const listener = (_event: Electron.IpcRendererEvent, requestId: string) => {
+      void Promise.resolve(handler(requestId));
+    };
+    ipcRenderer.on(IPC_CHANNELS.FLUSH_REQUEST, listener);
+    return () => {
+      ipcRenderer.removeListener(IPC_CHANNELS.FLUSH_REQUEST, listener);
+    };
+  },
+  signalFlushComplete: (requestId) => {
+    ipcRenderer.send(IPC_CHANNELS.FLUSH_COMPLETE, requestId);
+  },
+} satisfies ElectronAPI);
diff --git a/web/gui/src/main/splash.html b/web/gui/src/main/splash.html
new file mode 100644
index 000000000..68209ddbe
--- /dev/null
+++ b/web/gui/src/main/splash.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="Content-Security-Policy"
+      content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline';">
+<title>OneTrainer</title>
+<style>
+  /* Canonical boot-splash palette — hardcoded because the splash loads
+     before the renderer bundle (and its design tokens) exist. Mirrors
+     web/gui/src/shared/brandColors.ts. */
+  :root {
+    --cobalt-600: #2563EB;
+    --azure-500: #38BDF8;
+    --navy-800: #1E3A5F;
+    --bg-base: #0B1120;
+    --text-primary: #F1F5F9;
+    --text-secondary: #94A3B8;
+    --accent-negative: #F87171;
+    --track: rgba(255, 255, 255, 0.08);
+    --gradient-bottom: rgba(11, 17, 32, 0.92);
+    --gradient-top: rgba(11, 17, 32, 0);
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: var(--bg-base);
+    color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+    -webkit-app-region: drag;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .noise-overlay {
+    position: absolute;
+    inset: 0;
+    opacity: 0.03;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .svg-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+    animation: fadeIn 800ms ease-out;
+  }
+
+  .content-bottom {
+    position: relative;
+    z-index: 2;
+    padding: 0 40px 30px 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    animation: fadeIn 600ms ease-out 200ms both;
+    background: linear-gradient(to top, var(--gradient-bottom) 0%, var(--gradient-top) 100%);
+  }
+
+  .progress-track {
+    width: 100%;
+    height: 2px;
+    background: var(--track);
+    margin-bottom: 8px;
+    border-radius: 9999px;
+    overflow: hidden;
+  }
+
+  .progress-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--cobalt-600), var(--azure-500));
+    transition: width 300ms ease-out;
+    box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
+  }
+
+  .progress-fill.error {
+    background: var(--accent-negative);
+    box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
+    width: 100% !important;
+  }
+
+  .brand-title {
+    font-size: 1.4rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--text-primary);
+  }
+
+  .accent-text {
+    background: linear-gradient(135deg, var(--cobalt-600), var(--azure-500));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .status-message {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    font-family: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .status-message.error {
+    color: var(--accent-negative);
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  @keyframes scrollWave {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-320px); }
+  }
+
+  .wave-back {
+    animation: scrollWave 26s linear infinite;
+  }
+  .wave-mid {
+    animation: scrollWave 19s linear infinite reverse;
+  }
+  .wave-front {
+    animation: scrollWave 13s linear infinite;
+  }
+
+  .wave-fill {
+    fill: url(#splashGrad);
+  }
+  .wave-line {
+    fill: none;
+    stroke: url(#splashGrad);
+    stroke-width: 2;
+    stroke-linejoin: round;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+</style>
+</head>
+<body>
+  <div class="noise-overlay"></div>
+
+  <!-- Decorative artwork: three drifting training-metric traces (loss/reward
+       style jagged lines), evoking ML data rather than literal ocean waves. -->
+  <div class="svg-container">
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 640 360"
+      preserveAspectRatio="xMidYMid slice"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id="splashGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#2563EB" />
+          <stop offset="100%" stop-color="#38BDF8" />
+        </linearGradient>
+      </defs>
+
+      <!-- static chart gridlines -->
+      <g stroke="#FFFFFF" stroke-width="1" opacity="0.05">
+        <line x1="0" y1="140" x2="640" y2="140" />
+        <line x1="0" y1="200" x2="640" y2="200" />
+        <line x1="0" y1="260" x2="640" y2="260" />
+        <line x1="0" y1="320" x2="640" y2="320" />
+      </g>
+
+      <g class="wave-back" opacity="0.06">
+        <path class="wave-fill" opacity="0.10"
+          d="M-320,223 L-240,257 L-160,229 L-80,251 L0,223 L80,257 L160,229 L240,251 L320,223 L400,257 L480,229 L560,251 L640,223 L720,257 L800,229 L880,251 L960,223 L960,360 L-320,360 Z" />
+        <path class="wave-line"
+          d="M-320,223 L-240,257 L-160,229 L-80,251 L0,223 L80,257 L160,229 L240,251 L320,223 L400,257 L480,229 L560,251 L640,223 L720,257 L800,229 L880,251 L960,223" />
+      </g>
+
+      <g class="wave-mid" opacity="0.08">
+        <path class="wave-fill" opacity="0.14"
+          d="M-320,250 L-240,280 L-160,254 L-80,294 L0,250 L80,280 L160,254 L240,294 L320,250 L400,280 L480,254 L560,294 L640,250 L720,280 L800,254 L880,294 L960,250 L960,360 L-320,360 Z" />
+        <path class="wave-line"
+          d="M-320,250 L-240,280 L-160,254 L-80,294 L0,250 L80,280 L160,254 L240,294 L320,250 L400,280 L480,254 L560,294 L640,250 L720,280 L800,254 L880,294 L960,250" />
+      </g>
+
+      <g class="wave-front" opacity="0.11">
+        <path class="wave-fill" opacity="0.20"
+          d="M-320,286 L-240,318 L-160,278 L-80,312 L0,286 L80,318 L160,278 L240,312 L320,286 L400,318 L480,278 L560,312 L640,286 L720,318 L800,278 L880,312 L960,286 L960,360 L-320,360 Z" />
+        <path class="wave-line"
+          d="M-320,286 L-240,318 L-160,278 L-80,312 L0,286 L80,318 L160,278 L240,312 L320,286 L400,318 L480,278 L560,312 L640,286 L720,318 L800,278 L880,312 L960,286" />
+      </g>
+    </svg>
+  </div>
+
+  <div class="content-bottom">
+    <div class="progress-track">
+      <div class="progress-fill" id="progressFill"></div>
+    </div>
+    <h1 class="brand-title">One<span class="accent-text">Trainer</span></h1>
+    <span class="status-message" id="statusMessage">Initializing...</span>
+  </div>
+
+  <script>
+    // Canonical boot-splash JS API — signature kept stable so
+    // main/splash.ts executeJavaScript() calls stay unchanged.
+    function updateProgress(step, percent, message) {
+      var msg = document.getElementById('statusMessage');
+      var fill = document.getElementById('progressFill');
+      msg.className = 'status-message';
+      fill.className = 'progress-fill';
+      msg.textContent = message;
+      fill.style.width = Math.min(100, Math.max(0, percent)) + '%';
+    }
+
+    function showError(message) {
+      var msg = document.getElementById('statusMessage');
+      var fill = document.getElementById('progressFill');
+      msg.className = 'status-message error';
+      fill.className = 'progress-fill error';
+      msg.textContent = message;
+    }
+  </script>
+</body>
+</html>
diff --git a/web/gui/src/main/splash.ts b/web/gui/src/main/splash.ts
new file mode 100644
index 000000000..da8d80173
--- /dev/null
+++ b/web/gui/src/main/splash.ts
@@ -0,0 +1,99 @@
+import { app, BrowserWindow, screen } from "electron";
+import * as fs from "fs";
+import * as path from "path";
+
+import { SURFACE_DARK } from "../shared/brandColors";
+
+const isWindows = process.platform === "win32";
+
+function getSplashIcon(): string {
+  const root = app.isPackaged
+    ? path.resolve(process.resourcesPath, "..")
+    : path.resolve(__dirname, "..", "..", "..", "..", "..");
+  return isWindows
+    ? path.join(root, "resources", "icons", "icon.ico")
+    : path.join(root, "resources", "icons", "icon.png");
+}
+
+let splashWindow: BrowserWindow | null = null;
+
+export function createSplashWindow(): BrowserWindow | null {
+  const splashPath = path.join(__dirname, "splash.html");
+  if (!fs.existsSync(splashPath)) {
+    console.warn("[Electron] splash.html not found, skipping splash screen");
+    return null;
+  }
+
+  const primaryDisplay = screen.getPrimaryDisplay();
+  const splashWidth = Math.max(720, Math.round(primaryDisplay.workAreaSize.width * 0.4));
+  const splashHeight = Math.round(splashWidth * (9 / 16));
+
+  splashWindow = new BrowserWindow({
+    width: splashWidth,
+    height: splashHeight,
+    frame: false,
+    resizable: false,
+    backgroundColor: SURFACE_DARK,
+    show: false,
+    center: true,
+    skipTaskbar: false,
+    title: "OneTrainer",
+    icon: getSplashIcon(),
+    webPreferences: {
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+
+  splashWindow.loadFile(splashPath);
+
+  splashWindow.once("ready-to-show", () => {
+    if (splashWindow && !splashWindow.isDestroyed()) {
+      splashWindow.show();
+    }
+  });
+
+  splashWindow.on("closed", () => {
+    splashWindow = null;
+  });
+
+  return splashWindow;
+}
+
+export function updateSplash(step: number, percent: number, message: string): void {
+  if (!splashWindow || splashWindow.isDestroyed()) return;
+  splashWindow.webContents
+    .executeJavaScript(`updateProgress(${step}, ${percent}, ${JSON.stringify(message)})`)
+    .catch(() => {
+      /* splash may have been destroyed */
+    });
+}
+
+export function showSplashError(message: string): void {
+  if (!splashWindow || splashWindow.isDestroyed()) return;
+  splashWindow.webContents.executeJavaScript(`showError(${JSON.stringify(message)})`).catch(() => {
+    /* splash may have been destroyed */
+  });
+}
+
+export async function closeSplash(mainWindow: BrowserWindow, delayMs = 400): Promise<void> {
+  if (!splashWindow || splashWindow.isDestroyed()) {
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.show();
+    }
+    return;
+  }
+
+  updateSplash(5, 100, "Ready!");
+
+  await new Promise((r) => setTimeout(r, delayMs));
+
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.show();
+  }
+
+  if (splashWindow && !splashWindow.isDestroyed()) {
+    splashWindow.close();
+  }
+  splashWindow = null;
+}
diff --git a/web/gui/src/renderer/App.tsx b/web/gui/src/renderer/App.tsx
new file mode 100644
index 000000000..f87d07b4b
--- /dev/null
+++ b/web/gui/src/renderer/App.tsx
@@ -0,0 +1,144 @@
+import { lazy, Suspense, useEffect } from "react";
+
+import { configApi } from "./api/configApi";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+import BottomBar from "./components/layout/BottomBar";
+import TabNavigation from "./components/layout/TabNavigation";
+import TerminalPanel from "./components/layout/TerminalPanel";
+import TopBar from "./components/layout/TopBar";
+import { SchemaTabRenderer } from "./components/schema/SchemaTabRenderer";
+import { useTrainingWebSocket } from "./hooks/useTrainingWebSocket";
+import { useConfigStore } from "./store/configStore";
+import { useTrainingStore } from "./store/trainingStore";
+import { useUiSchemaStore } from "./store/uiSchemaStore";
+import { useUiStore } from "./store/uiStore";
+
+const ConceptsPage = lazy(() => import("./pages/ConceptsPage"));
+const SamplingPage = lazy(() => import("./pages/SamplingPage"));
+const EmbeddingsPage = lazy(() => import("./pages/EmbeddingsPage"));
+const ToolsPage = lazy(() => import("./pages/ToolsPage"));
+const PerformancePage = lazy(() => import("./pages/PerformancePage"));
+const RunPage = lazy(() => import("./pages/RunPage"));
+const HelpPage = lazy(() => import("./pages/HelpPage"));
+
+const CUSTOM_TAB_COMPONENTS: Record<string, React.LazyExoticComponent<React.ComponentType>> = {
+  concepts: ConceptsPage,
+  sampling: SamplingPage,
+  additionalembeddings: EmbeddingsPage,
+  tools: ToolsPage,
+  performance: PerformancePage,
+  run: RunPage,
+  help: HelpPage,
+};
+
+function TabContent() {
+  const activeTab = useUiStore((s) => s.activeTab);
+  const schema = useUiSchemaStore((s) => s.schema);
+  const tabDef = schema?.tabs.find((t) => t.id === activeTab);
+
+  const CustomComponent = CUSTOM_TAB_COMPONENTS[activeTab];
+  if (CustomComponent || tabDef?.renderer === "custom") {
+    if (CustomComponent) return <CustomComponent />;
+    return null;
+  }
+
+  if (tabDef && tabDef.renderer === "schema") {
+    const hasSections =
+      (tabDef.sections && tabDef.sections.length > 0) ||
+      (tabDef.sectionDefs && Object.keys(tabDef.sectionDefs).length > 0);
+
+    if (hasSections) {
+      return <SchemaTabRenderer tab={tabDef} />;
+    }
+  }
+
+  return (
+    <div className="card" style={{ padding: "24px" }}>
+      <h2 style={{ margin: 0 }}>{activeTab}</h2>
+      <p style={{ color: "var(--color-on-surface-secondary)", marginTop: "8px" }}>This tab will be implemented soon.</p>
+    </div>
+  );
+}
+
+export default function App() {
+  const activeTab = useUiStore((s) => s.activeTab);
+  const setBackendConnected = useUiStore((s) => s.setBackendConnected);
+  const backendConnected = useUiStore((s) => s.backendConnected);
+  const terminalOpen = useUiStore((s) => s.terminalOpen);
+  const loadConfig = useConfigStore((s) => s.loadConfig);
+  const flushPendingChanges = useConfigStore((s) => s.flushPendingChanges);
+  const fetchTrainingStatus = useTrainingStore((s) => s.fetchStatus);
+  const loadSchema = useUiSchemaStore((s) => s.loadSchema);
+
+  useEffect(() => {
+    loadSchema();
+  }, [loadSchema]);
+
+  useTrainingWebSocket(backendConnected);
+
+  useEffect(() => {
+    let cancelled = false;
+    const checkHealth = async () => {
+      try {
+        const data = await configApi.health();
+        if (!cancelled && data.status === "ok") {
+          setBackendConnected(true);
+        }
+      } catch {
+        if (!cancelled) setBackendConnected(false);
+      }
+    };
+    checkHealth();
+    const interval = setInterval(checkHealth, 5000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [setBackendConnected]);
+
+  useEffect(() => {
+    if (!backendConnected) return;
+    const init = async () => {
+      await loadConfig();
+      await fetchTrainingStatus();
+    };
+    init().catch((err) => {
+      console.error("App initialization failed:", err);
+    });
+  }, [backendConnected, loadConfig, fetchTrainingStatus]);
+
+  useEffect(() => {
+    const api = window.electronAPI;
+    if (!api) return;
+
+    return api.onFlushRequest(async (requestId) => {
+      try {
+        await flushPendingChanges();
+      } catch (err) {
+        console.error("[App] flush failed:", err);
+      } finally {
+        api.signalFlushComplete(requestId);
+      }
+    });
+  }, [flushPendingChanges]);
+
+  return (
+    <div className="app-shell">
+      <TopBar />
+      <TabNavigation />
+      <main className="tab-content" role="tabpanel" id={`tabpanel-${activeTab}`} aria-labelledby={`tab-${activeTab}`}>
+        <div className="tab-content-inner">
+          <Suspense
+            fallback={<div className="skeleton" style={{ height: 200 }} aria-busy="true" aria-label="Loading page" />}
+          >
+            <ErrorBoundary>
+              <TabContent />
+            </ErrorBoundary>
+          </Suspense>
+        </div>
+      </main>
+      {terminalOpen && <TerminalPanel isOpen={terminalOpen} backendConnected={backendConnected} />}
+      <BottomBar />
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/api/configApi.ts b/web/gui/src/renderer/api/configApi.ts
new file mode 100644
index 000000000..70cbfaf24
--- /dev/null
+++ b/web/gui/src/renderer/api/configApi.ts
@@ -0,0 +1,164 @@
+import { API_BASE, request } from "@/api/request";
+import type { ConceptConfig, SampleConfig, SecretsConfig, TrainConfig } from "@/types/generated/config";
+
+export interface HealthResponse {
+  status: string;
+  version: string;
+}
+
+export interface PresetInfo {
+  name: string;
+  path: string;
+  is_builtin: boolean;
+}
+
+export interface FieldMetadata {
+  type: string;
+  default: unknown;
+  nullable: boolean;
+  enum_values?: string[];
+  min?: number;
+  max?: number;
+  description?: string;
+}
+
+export type ConfigSchema = Record<string, FieldMetadata>;
+
+export interface OptimizerParamDetail {
+  title: string;
+  tooltip: string;
+  type: "bool" | "float" | "int" | "str" | "dict";
+}
+
+export interface OptimizerParamsResponse {
+  optimizers: Record<
+    string,
+    {
+      keys: string[];
+      defaults: Record<string, unknown>;
+    }
+  >;
+  detail_map: Record<string, OptimizerParamDetail>;
+}
+
+export const configApi = {
+  health: () => request<HealthResponse>("/health"),
+
+  getConfig: () => request<TrainConfig>("/config"),
+
+  updateConfig: (config: TrainConfig) =>
+    request<TrainConfig>("/config", {
+      method: "PUT",
+      body: JSON.stringify(config),
+    }),
+
+  getDefaults: () => request<TrainConfig>("/config/defaults"),
+
+  getSchema: () => request<{ fields: ConfigSchema }>("/config/schema").then((r) => r.fields),
+
+  exportConfig: () => request<TrainConfig>("/config/export", { method: "POST" }),
+
+  changeOptimizer: (optimizer: string) =>
+    request<TrainConfig>("/config/change-optimizer", {
+      method: "POST",
+      body: JSON.stringify({ optimizer }),
+    }),
+
+  getOptimizerParams: () => request<OptimizerParamsResponse>("/config/optimizer-params"),
+
+  listPresets: () => request<PresetInfo[]>("/presets"),
+
+  loadPreset: (path: string) =>
+    request<TrainConfig>("/presets/load", {
+      method: "POST",
+      body: JSON.stringify({ path }),
+    }),
+
+  savePreset: (name: string) =>
+    request<{ name: string; path: string }>("/presets/save", {
+      method: "POST",
+      body: JSON.stringify({ name }),
+    }),
+
+  deletePreset: (name: string) =>
+    request<{ deleted: string }>(`/presets/${encodeURIComponent(name)}`, {
+      method: "DELETE",
+    }),
+
+  getConcepts: () => request<ConceptConfig[]>("/concepts"),
+
+  saveConcepts: (concepts: ConceptConfig[]) =>
+    request<{ saved: number; path: string }>("/concepts", {
+      method: "PUT",
+      body: JSON.stringify(concepts),
+    }),
+
+  conceptImages: (path: string, includeSubdirectories = false, offset = 0, limit = 9999) =>
+    request<{
+      total: number;
+      offset: number;
+      images: Array<{ filename: string; path: string; caption: string | null }>;
+    }>(
+      `/concepts/images?path=${encodeURIComponent(path)}&offset=${offset}&limit=${limit}&include_subdirectories=${includeSubdirectories}`,
+    ),
+
+  conceptTextFile: (path: string) =>
+    request<{ content: string }>(`/concepts/text-file?path=${encodeURIComponent(path)}`),
+
+  conceptImageUrl: (path: string) => `${API_BASE}/concepts/image?path=${encodeURIComponent(path)}`,
+
+  saveCaption: (image_path: string, caption: string) =>
+    request<{ ok: boolean; saved: string }>("/concepts/save-caption", {
+      method: "POST",
+      body: JSON.stringify({ image_path, caption }),
+    }),
+
+  conceptStats: (path: string, includeSubdirectories: boolean, advanced: boolean) =>
+    request<Record<string, unknown>>("/concepts/stats", {
+      method: "POST",
+      body: JSON.stringify({ path, include_subdirectories: includeSubdirectories, advanced }),
+    }),
+
+  cancelConceptStats: () => request<{ cancelled: boolean }>("/concepts/stats/cancel", { method: "DELETE" }),
+
+  augmentationPreview: (req: { image_path: string; image: Record<string, unknown>; seed: number }) =>
+    request<{ ok: boolean; image_base64: string; seed: number }>("/concepts/augmentation-preview", {
+      method: "POST",
+      body: JSON.stringify(req),
+    }),
+
+  getSamples: () => request<SampleConfig[]>("/samples"),
+
+  saveSamples: (samples: SampleConfig[]) =>
+    request<{ saved: number; path: string }>("/samples", {
+      method: "PUT",
+      body: JSON.stringify(samples),
+    }),
+
+  getSecrets: () => request<SecretsConfig>("/secrets"),
+
+  saveSecrets: (secrets: SecretsConfig) =>
+    request<SecretsConfig>("/secrets", {
+      method: "PUT",
+      body: JSON.stringify(secrets),
+    }),
+
+  tensorboardLaunch: () =>
+    request<{ ok: boolean; url?: string; port?: number; already_running?: boolean; error?: string }>(
+      "/tensorboard/launch",
+      { method: "POST" },
+    ),
+
+  tensorboardRuns: () => request<string[]>("/tensorboard/runs"),
+
+  tensorboardTags: (run: string) => request<string[]>(`/tensorboard/scalars?run=${encodeURIComponent(run)}`),
+
+  tensorboardScalars: (run: string, tag: string, afterStep?: number) =>
+    request<Array<{ wall_time: number; step: number; value: number }>>(
+      `/tensorboard/scalars/${encodeURIComponent(tag)}?run=${encodeURIComponent(run)}${afterStep != null ? `&after_step=${afterStep}` : ""}`,
+    ),
+
+  wikiPages: () => request<Array<{ title: string; pages: string[] }>>("/wiki/pages"),
+
+  wikiPage: (slug: string) => request<{ slug: string; content: string }>(`/wiki/pages/${encodeURIComponent(slug)}`),
+};
diff --git a/web/gui/src/renderer/api/request.ts b/web/gui/src/renderer/api/request.ts
new file mode 100644
index 000000000..d237d0064
--- /dev/null
+++ b/web/gui/src/renderer/api/request.ts
@@ -0,0 +1,66 @@
+const isFileProtocol = typeof window !== "undefined" && window.location.protocol === "file:";
+
+function resolveBackendPort(): number {
+  if (typeof window !== "undefined") {
+    const params = new URLSearchParams(window.location.search);
+    const portStr = params.get("backendPort");
+    if (portStr) {
+      const port = parseInt(portStr, 10);
+      if (!isNaN(port)) return port;
+    }
+  }
+  return 8000;
+}
+
+const BACKEND_PORT = resolveBackendPort();
+
+export const API_BASE = isFileProtocol ? `http://127.0.0.1:${BACKEND_PORT}/api` : "/api";
+export const WS_BASE = isFileProtocol ? `ws://127.0.0.1:${BACKEND_PORT}` : `ws://${window.location.host}`;
+
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public readonly status: number,
+    public readonly body: string,
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+export class ClientError extends ApiError {
+  constructor(status: number, body: string) {
+    super(`Client error ${status}: ${body}`, status, body);
+    this.name = "ClientError";
+  }
+}
+
+export class ServerError extends ApiError {
+  constructor(status: number, body: string) {
+    super(`Server error ${status}: ${body}`, status, body);
+    this.name = "ServerError";
+  }
+}
+
+export async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: {
+      ...(options?.body ? { "Content-Type": "application/json" } : {}),
+      ...options?.headers,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    if (res.status >= 400 && res.status < 500) {
+      throw new ClientError(res.status, text);
+    }
+    if (res.status >= 500) {
+      throw new ServerError(res.status, text);
+    }
+    throw new ApiError(`API error ${res.status}: ${text}`, res.status, text);
+  }
+
+  return res.json() as Promise<T>;
+}
diff --git a/web/gui/src/renderer/api/samplingApi.ts b/web/gui/src/renderer/api/samplingApi.ts
new file mode 100644
index 000000000..82843563f
--- /dev/null
+++ b/web/gui/src/renderer/api/samplingApi.ts
@@ -0,0 +1,54 @@
+import { request } from "@/api/request";
+
+export interface SamplerActionResponse {
+  ok: boolean;
+  error: string | null;
+}
+
+export interface SampleData {
+  file_type: "IMAGE" | "VIDEO" | "AUDIO" | string;
+  format: string;
+  data: string | null;
+}
+
+export interface SamplerSampleResponse {
+  ok: boolean;
+  error: string | null;
+  sample: SampleData | null;
+}
+
+export interface SamplerStatusResponse {
+  status: "idle" | "loading" | "ready" | "sampling" | "error";
+  error: string | null;
+  model_loaded: boolean;
+  sample_progress: {
+    step: number;
+    max_step: number;
+  };
+}
+
+export interface StandaloneSampleRequest {
+  prompt?: string;
+  negative_prompt?: string;
+  height?: number;
+  width?: number;
+  seed?: number;
+  random_seed?: boolean;
+  diffusion_steps?: number;
+  cfg_scale?: number;
+  noise_scheduler?: string;
+}
+
+export const samplingApi = {
+  loadModel: () => request<SamplerActionResponse>("/tools/sampling/load-model", { method: "POST" }),
+
+  sample: (params: StandaloneSampleRequest) =>
+    request<SamplerSampleResponse>("/tools/sampling/sample", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  unload: () => request<SamplerActionResponse>("/tools/sampling/unload", { method: "POST" }),
+
+  getStatus: () => request<SamplerStatusResponse>("/tools/sampling/status"),
+};
diff --git a/web/gui/src/renderer/api/systemApi.ts b/web/gui/src/renderer/api/systemApi.ts
new file mode 100644
index 000000000..d2bca64c2
--- /dev/null
+++ b/web/gui/src/renderer/api/systemApi.ts
@@ -0,0 +1,19 @@
+import { request } from "@/api/request";
+
+export interface ProfilingDumpResponse {
+  ok: boolean;
+  path: string | null;
+  error: string | null;
+}
+
+export interface ProfilingToggleResponse {
+  ok: boolean;
+  active: boolean;
+  error: string | null;
+}
+
+export const systemApi = {
+  dumpStacks: () => request<ProfilingDumpResponse>("/system/profiling/dump-stacks", { method: "POST" }),
+
+  toggleProfiling: () => request<ProfilingToggleResponse>("/system/profiling/toggle", { method: "POST" }),
+};
diff --git a/web/gui/src/renderer/api/toolsApi.ts b/web/gui/src/renderer/api/toolsApi.ts
new file mode 100644
index 000000000..b6493c1b0
--- /dev/null
+++ b/web/gui/src/renderer/api/toolsApi.ts
@@ -0,0 +1,244 @@
+import { API_BASE, request } from "@/api/request";
+
+export interface ToolActionResponse {
+  ok: boolean;
+  error: string | null;
+  task_id: string | null;
+}
+
+export interface ToolStatusResponse {
+  status: "idle" | "running" | "completed" | "error";
+  progress: number;
+  max_progress: number;
+  error: string | null;
+  task_id: string | null;
+}
+
+export interface QuantizationParams {
+  layer_filter: string;
+  layer_filter_preset: string;
+  layer_filter_regex: boolean;
+  svd_dtype: string;
+  svd_rank: number;
+  cache_dir: string | null;
+}
+
+export interface ConvertModelRequest {
+  model_type: string;
+  training_method: string;
+  input_name: string;
+  output_dtype: string;
+  output_model_format: string;
+  output_model_destination: string;
+  quantization?: QuantizationParams | null;
+}
+
+export interface ConvertModelResponse {
+  ok: boolean;
+  error: string | null;
+}
+
+export interface CaptionRequest {
+  model?: string;
+  folder: string;
+  initial_caption?: string;
+  caption_prefix?: string;
+  caption_postfix?: string;
+  mode?: string;
+  include_subdirectories?: boolean;
+}
+
+export interface ApiCaptionRequest {
+  backend: "openai" | "gemini";
+  folder: string;
+  prompt: string;
+  additional_prompts?: string[];
+  mode?: string;
+  include_subdirectories?: boolean;
+  caption_prefix?: string;
+  caption_postfix?: string;
+  api_url?: string;
+  api_key?: string;
+  model_name?: string;
+  system_prompt?: string;
+  temperature?: number;
+  max_tokens?: number;
+  enable_thinking?: boolean;
+  batch_size?: number;
+  requests_per_minute?: number;
+  timeout?: number;
+  pass_filename?: boolean;
+  pass_metadata?: boolean;
+  pass_current_caption?: boolean;
+}
+
+export interface PreviewRequest {
+  backend?: string;
+  model?: string;
+  folder?: string;
+  image_path?: string;
+  prompt?: string;
+  include_subdirectories?: boolean;
+  api_url?: string;
+  api_key?: string;
+  model_name?: string;
+  system_prompt?: string;
+  temperature?: number;
+  max_tokens?: number;
+  enable_thinking?: boolean;
+  timeout?: number;
+  pass_filename?: boolean;
+  pass_metadata?: boolean;
+  pass_current_caption?: boolean;
+}
+
+export interface PreviewResponse {
+  ok: boolean;
+  caption: string;
+  prompt_used: string;
+  image_path: string;
+  image_base64: string;
+  error: string | null;
+}
+
+export interface CaptionKeys {
+  openai_api_key: string;
+  openai_api_url: string;
+  gemini_api_key: string;
+}
+
+export interface CapabilitiesResponse {
+  ultralytics_available: boolean;
+  caption_models: string[];
+  mask_models: string[];
+}
+
+export interface MaskRequest {
+  model?: string;
+  folder: string;
+  prompt?: string;
+  mode?: string;
+  threshold?: number;
+  smooth?: number;
+  expand?: number;
+  alpha?: number;
+  include_subdirectories?: boolean;
+  model_path?: string;
+}
+
+export interface ImageListItem {
+  path: string;
+  filename: string;
+  has_mask: boolean;
+}
+
+export interface YoloDetection {
+  class_name: string;
+  confidence: number;
+  polygon: number[][];
+  bbox: number[];
+}
+
+export interface YoloPredictResponse {
+  ok: boolean;
+  detections: YoloDetection[];
+  error: string | null;
+}
+
+export const toolsApi = {
+  convertModel: (params: ConvertModelRequest) =>
+    request<ConvertModelResponse>("/tools/convert", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  generateCaptions: (params: CaptionRequest) =>
+    request<ToolActionResponse>("/tools/captions/generate", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  generateCaptionsApi: (params: ApiCaptionRequest) =>
+    request<ToolActionResponse>("/tools/captions/generate-api", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  previewCaption: (params: PreviewRequest) =>
+    request<PreviewResponse>("/tools/captions/preview", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  getCaptionKeys: () => request<CaptionKeys>("/tools/captions/keys"),
+
+  saveCaptionKeys: (params: CaptionKeys) =>
+    request<CaptionKeys>("/tools/captions/keys", {
+      method: "PUT",
+      body: JSON.stringify(params),
+    }),
+
+  getCapabilities: () => request<CapabilitiesResponse>("/tools/capabilities"),
+
+  generateMasks: (params: MaskRequest) =>
+    request<ToolActionResponse>("/tools/masks/generate", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  getStatus: () => request<ToolStatusResponse>("/tools/status"),
+
+  cancel: () => request<ToolActionResponse>("/tools/cancel", { method: "POST" }),
+
+  listMaskEditorImages: (folder: string, includeSubdirs: boolean) =>
+    request<ImageListItem[]>(
+      `/tools/mask-editor/images?folder=${encodeURIComponent(folder)}&include_subdirectories=${includeSubdirs}`,
+    ),
+
+  getMaskEditorImageUrl: (path: string) => `${API_BASE}/tools/mask-editor/image?path=${encodeURIComponent(path)}`,
+
+  saveMask: async (imagePath: string, maskBlob: Blob, smooth = 0, expand = 0, threshold = 128) => {
+    const form = new FormData();
+    form.append("image_path", imagePath);
+    form.append("smooth", String(smooth));
+    form.append("expand", String(expand));
+    form.append("threshold", String(threshold));
+    form.append("mask", maskBlob, "mask.png");
+    const res = await fetch(`${API_BASE}/tools/mask-editor/save-mask`, {
+      method: "POST",
+      body: form,
+    });
+    return res.json() as Promise<{ ok: boolean; mask_path?: string; detail?: string }>;
+  },
+
+  yoloPredict: (imagePath: string, modelPath: string) =>
+    request<YoloPredictResponse>("/tools/mask-editor/yolo-predict", {
+      method: "POST",
+      body: JSON.stringify({ image_path: imagePath, model_path: modelPath }),
+    }),
+
+  downloadDebugPackage: async (): Promise<string> => {
+    const res = await fetch(`${API_BASE}/tools/debug-package`, {
+      method: "POST",
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`Failed to generate debug package: ${text}`);
+    }
+
+    const disposition = res.headers.get("Content-Disposition") ?? "";
+    const filenameMatch = disposition.match(/filename="?([^"]+)"?/);
+    const filename = filenameMatch?.[1] ?? "OneTrainer_debug.zip";
+
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+
+    return filename;
+  },
+};
diff --git a/web/gui/src/renderer/api/trainingApi.ts b/web/gui/src/renderer/api/trainingApi.ts
new file mode 100644
index 000000000..f91bb22fa
--- /dev/null
+++ b/web/gui/src/renderer/api/trainingApi.ts
@@ -0,0 +1,47 @@
+import { request } from "@/api/request";
+
+export interface TrainingActionResponse {
+  ok: boolean;
+  error: string | null;
+}
+
+export interface TrainingStatusResponse {
+  status: "idle" | "running" | "stopping" | "error";
+  error: string | null;
+  start_time: number | null;
+}
+
+export interface CustomSampleRequest {
+  prompt?: string;
+  negative_prompt?: string;
+  height?: number;
+  width?: number;
+  seed?: number;
+  random_seed?: boolean;
+  diffusion_steps?: number;
+  cfg_scale?: number;
+}
+
+export const trainingApi = {
+  start: (options?: { reattach?: boolean }) =>
+    request<TrainingActionResponse>("/training/start", {
+      method: "POST",
+      body: JSON.stringify(options ?? {}),
+    }),
+
+  stop: () => request<TrainingActionResponse>("/training/stop", { method: "POST" }),
+
+  sample: () => request<TrainingActionResponse>("/training/sample", { method: "POST" }),
+
+  sampleCustom: (params: CustomSampleRequest) =>
+    request<TrainingActionResponse>("/training/sample/custom", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  backup: () => request<TrainingActionResponse>("/training/backup", { method: "POST" }),
+
+  save: () => request<TrainingActionResponse>("/training/save", { method: "POST" }),
+
+  getStatus: () => request<TrainingStatusResponse>("/training/status"),
+};
diff --git a/web/gui/src/renderer/api/videoToolsApi.ts b/web/gui/src/renderer/api/videoToolsApi.ts
new file mode 100644
index 000000000..b21cbd99f
--- /dev/null
+++ b/web/gui/src/renderer/api/videoToolsApi.ts
@@ -0,0 +1,72 @@
+import { request } from "@/api/request";
+
+export interface ExtractClipsParams {
+  video_path?: string;
+  directory?: string;
+  batch_mode?: boolean;
+  output_dir: string;
+  time_start?: string;
+  time_end?: string;
+  output_subdirectories?: boolean;
+  split_at_cuts?: boolean;
+  max_length?: number;
+  fps?: number;
+  remove_borders?: boolean;
+  crop_variation?: number;
+}
+
+export interface ExtractImagesParams {
+  video_path?: string;
+  directory?: string;
+  batch_mode?: boolean;
+  output_dir: string;
+  time_start?: string;
+  time_end?: string;
+  output_subdirectories?: boolean;
+  images_per_second?: number;
+  blur_removal?: number;
+  remove_borders?: boolean;
+  crop_variation?: number;
+}
+
+export interface DownloadParams {
+  url?: string;
+  link_list_path?: string;
+  batch_mode?: boolean;
+  output_dir: string;
+  additional_args?: string;
+}
+
+export interface VideoToolResponse {
+  ok: boolean;
+  error: string | null;
+  message: string | null;
+}
+
+export interface VideoToolStatusResponse {
+  status: "idle" | "running" | "completed" | "error";
+  message: string | null;
+  error: string | null;
+}
+
+export const videoToolsApi = {
+  extractClips: (params: ExtractClipsParams) =>
+    request<VideoToolResponse>("/tools/video/extract-clips", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  extractImages: (params: ExtractImagesParams) =>
+    request<VideoToolResponse>("/tools/video/extract-images", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  download: (params: DownloadParams) =>
+    request<VideoToolResponse>("/tools/video/download", {
+      method: "POST",
+      body: JSON.stringify(params),
+    }),
+
+  getStatus: () => request<VideoToolStatusResponse>("/tools/video/status"),
+};
diff --git a/web/gui/src/renderer/components/ErrorBoundary.tsx b/web/gui/src/renderer/components/ErrorBoundary.tsx
new file mode 100644
index 000000000..cd8a80913
--- /dev/null
+++ b/web/gui/src/renderer/components/ErrorBoundary.tsx
@@ -0,0 +1,124 @@
+import React, { Component, type ErrorInfo, type ReactNode } from "react";
+
+import { ERROR_500, ON_SURFACE_DARK, SURFACE_RAISED_DARK, SURFACE_SUNKEN_DARK } from "../../shared/brandColors";
+
+export interface FallbackProps {
+  error: Error;
+  resetErrorBoundary: () => void;
+}
+
+interface Props {
+  children: ReactNode;
+  /**
+   * Static fallback UI. Does NOT receive the reset function — the user cannot
+   * trigger a reset from this element. Prefer `fallbackRender` instead, which
+   * passes `{ error, resetErrorBoundary }` to the callback.
+   */
+  fallback?: ReactNode;
+  /** Render prop for fallback UI that receives the error and a reset function. */
+  fallbackRender?: (props: FallbackProps) => ReactNode;
+  /** Called after the boundary resets and children are about to remount. Use for app-level state cleanup. */
+  onReset?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  /** Incremented on each reset to force children to remount with fresh state. */
+  resetCount: number;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null, resetCount: 0 };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  resetErrorBoundary = (): void => {
+    this.setState(
+      (prev) => ({ hasError: false, error: null, resetCount: prev.resetCount + 1 }),
+      () => {
+        this.props.onReset?.();
+      },
+    );
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      const error = this.state.error;
+
+      if (this.props.fallbackRender && error) {
+        return this.props.fallbackRender({
+          error,
+          resetErrorBoundary: this.resetErrorBoundary,
+        });
+      }
+
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div style={{ padding: "24px", textAlign: "center" }}>
+          <h2 style={{ color: `var(--color-error-500, ${ERROR_500})`, margin: "0 0 8px" }}>Something went wrong</h2>
+          <p style={{ color: "var(--color-on-surface-secondary)", margin: "0 0 16px" }}>
+            {error?.message ?? "An unexpected error occurred."}
+          </p>
+          {error?.stack && (
+            <details style={{ marginBottom: "16px", textAlign: "left" }}>
+              <summary
+                style={{
+                  cursor: "pointer",
+                  color: "var(--color-on-surface-secondary)",
+                  marginBottom: "8px",
+                }}
+              >
+                Error details
+              </summary>
+              <pre
+                style={{
+                  fontSize: "12px",
+                  padding: "12px",
+                  borderRadius: "6px",
+                  background: `var(--color-surface-sunken, ${SURFACE_SUNKEN_DARK})`,
+                  color: "var(--color-on-surface-secondary)",
+                  overflow: "auto",
+                  maxHeight: "200px",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                }}
+              >
+                {error?.stack}
+              </pre>
+            </details>
+          )}
+          <button
+            onClick={this.resetErrorBoundary}
+            style={{
+              padding: "8px 16px",
+              borderRadius: "6px",
+              border: "1px solid var(--color-border-subtle, rgba(255,255,255,0.12))",
+              background: `var(--color-surface-raised, ${SURFACE_RAISED_DARK})`,
+              color: `var(--color-on-surface, ${ON_SURFACE_DARK})`,
+              cursor: "pointer",
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    // Key the children wrapper by resetCount so that a reset forces React to
+    // unmount and remount all children, discarding any corrupted component state.
+    return <React.Fragment key={this.state.resetCount}>{this.props.children}</React.Fragment>;
+  }
+}
diff --git a/web/gui/src/renderer/components/concepts/AspectBucketChart.tsx b/web/gui/src/renderer/components/concepts/AspectBucketChart.tsx
new file mode 100644
index 000000000..18fa3db42
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/AspectBucketChart.tsx
@@ -0,0 +1,138 @@
+export interface AspectBucketChartProps {
+  buckets: Record<string, number>;
+}
+
+function decimalToAspectRatio(value: number): string {
+  // Find closest fraction with limited denominator (matching Python's Fraction.limit_denominator(16))
+  let bestNum = 1;
+  let bestDen = 1;
+  let bestError = Math.abs(value - 1);
+
+  for (let den = 1; den <= 16; den++) {
+    const num = Math.round(value * den);
+    if (num < 1) continue;
+    const error = Math.abs(value - num / den);
+    if (error < bestError) {
+      bestError = error;
+      bestNum = num;
+      bestDen = den;
+    }
+  }
+
+  // Format as W:H (denominator:numerator since aspect = height/width)
+  return `${bestDen}:${bestNum}`;
+}
+
+export function AspectBucketChart({ buckets }: AspectBucketChartProps) {
+  const entries = Object.entries(buckets)
+    .map(([k, v]) => ({ ratio: parseFloat(k), count: v as number }))
+    .sort((a, b) => a.ratio - b.ratio);
+
+  if (entries.length === 0) {
+    return (
+      <p className="text-xs text-[var(--color-on-surface-secondary)] text-center py-4">
+        No aspect bucket data available.
+      </p>
+    );
+  }
+
+  const maxCount = Math.max(...entries.map((e) => e.count), 1);
+  const nonZeroEntries = entries.filter((e) => e.count > 0);
+  const minNonZero = nonZeroEntries.length > 0 ? Math.min(...nonZeroEntries.map((e) => e.count)) : 0;
+
+  const barWidth = 18;
+  const barGap = 2;
+  const chartHeight = 160;
+  const labelHeight = 50;
+  const topPadding = 20;
+  const leftPadding = 5;
+  const totalWidth = entries.length * (barWidth + barGap) + leftPadding * 2;
+  const totalHeight = chartHeight + labelHeight + topPadding;
+
+  return (
+    <div className="overflow-x-auto">
+      <svg
+        width={Math.max(totalWidth, 200)}
+        height={totalHeight}
+        viewBox={`0 0 ${Math.max(totalWidth, 200)} ${totalHeight}`}
+        className="block"
+      >
+        <text
+          x={leftPadding + 2}
+          y={totalHeight - 2}
+          className="fill-[var(--color-on-surface-secondary)]"
+          fontSize="9"
+          textAnchor="start"
+        >
+          Wide
+        </text>
+        <text
+          x={totalWidth / 2}
+          y={totalHeight - 2}
+          className="fill-[var(--color-on-surface-secondary)]"
+          fontSize="9"
+          textAnchor="middle"
+        >
+          Square
+        </text>
+        <text
+          x={totalWidth - leftPadding - 2}
+          y={totalHeight - 2}
+          className="fill-[var(--color-on-surface-secondary)]"
+          fontSize="9"
+          textAnchor="end"
+        >
+          Tall
+        </text>
+
+        {entries.map((entry, i) => {
+          const x = leftPadding + i * (barWidth + barGap);
+          const barH = maxCount > 0 ? (entry.count / maxCount) * chartHeight : 0;
+          const y = topPadding + chartHeight - barH;
+          const label = decimalToAspectRatio(entry.ratio);
+
+          const isSmallest = entry.count > 0 && entry.count === minNonZero && nonZeroEntries.length > 1;
+          const barColor = isSmallest ? "var(--color-warning-500)" : "var(--color-cobalt-600)";
+
+          return (
+            <g key={entry.ratio}>
+              {entry.count > 0 && (
+                <rect x={x} y={y} width={barWidth} height={barH} fill={barColor} opacity={0.8} rx={2} />
+              )}
+              {entry.count > 0 && (
+                <text
+                  x={x + barWidth / 2}
+                  y={y - 3}
+                  className="fill-[var(--color-on-surface-secondary)]"
+                  fontSize="8"
+                  textAnchor="middle"
+                >
+                  {entry.count}
+                </text>
+              )}
+              <text
+                x={x + barWidth / 2}
+                y={topPadding + chartHeight + 12}
+                className="fill-[var(--color-on-surface-secondary)]"
+                fontSize="7"
+                textAnchor="middle"
+                transform={`rotate(45, ${x + barWidth / 2}, ${topPadding + chartHeight + 12})`}
+              >
+                {label}
+              </text>
+            </g>
+          );
+        })}
+
+        <line
+          x1={leftPadding}
+          y1={topPadding + chartHeight}
+          x2={totalWidth - leftPadding}
+          y2={topPadding + chartHeight}
+          stroke="var(--color-border-subtle)"
+          strokeWidth="1"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ConceptCard.tsx b/web/gui/src/renderer/components/concepts/ConceptCard.tsx
new file mode 100644
index 000000000..b7d88ab45
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ConceptCard.tsx
@@ -0,0 +1,141 @@
+import { Copy, ImageIcon, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { API_BASE } from "@/api/request";
+import { Toggle } from "@/components/shared";
+import type { ConceptConfig } from "@/types/generated/config";
+import type { ConceptType } from "@/types/generated/enums";
+
+export interface ConceptCardProps {
+  concept: ConceptConfig;
+  index: number;
+  onOpen: () => void;
+  onRemove: () => void;
+  onClone: () => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+/** Color config per concept type: border, badge background, badge text, overlay tint */
+const typeStyles: Record<
+  ConceptType,
+  {
+    border: string;
+    badgeBg: string;
+    badgeText: string;
+    overlay: string;
+    label: string;
+  }
+> = {
+  STANDARD: {
+    border: "var(--color-cobalt-600)",
+    badgeBg: "var(--color-cobalt-600-alpha-15)",
+    badgeText: "var(--color-cobalt-600)",
+    overlay: "var(--color-cobalt-600-alpha-06)",
+    label: "Standard",
+  },
+  VALIDATION: {
+    border: "var(--color-success-500)",
+    badgeBg: "var(--color-success-500-alpha-15)",
+    badgeText: "var(--color-success-500)",
+    overlay: "var(--color-success-500-alpha-06)",
+    label: "Validation",
+  },
+  PRIOR_PREDICTION: {
+    border: "var(--color-warning-500)",
+    badgeBg: "var(--color-warning-500-alpha-15)",
+    badgeText: "var(--color-warning-500)",
+    overlay: "var(--color-warning-500-alpha-06)",
+    label: "Prior",
+  },
+};
+
+export function ConceptCard({ concept, index, onOpen, onRemove, onClone, onToggle }: ConceptCardProps) {
+  const displayName = concept.name || (concept.path ? concept.path.split(/[/\\]/).pop() : `Concept ${index + 1}`);
+  const style = typeStyles[concept.type] ?? typeStyles.STANDARD;
+
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
+  const [thumbnailError, setThumbnailError] = useState(false);
+
+  useEffect(() => {
+    if (!concept.path) {
+      setThumbnailUrl(null);
+      setThumbnailError(false);
+      return;
+    }
+    const url = `${API_BASE}/concepts/thumbnail?path=${encodeURIComponent(concept.path)}&include_subdirectories=${concept.include_subdirectories ?? false}`;
+    setThumbnailUrl(url);
+    setThumbnailError(false);
+  }, [concept.path, concept.include_subdirectories]);
+
+  return (
+    <div
+      className="card relative group flex flex-col min-w-[220px] max-w-[280px] flex-1 cursor-pointer transition-transform duration-200 hover:translate-y-[-2px]"
+      style={{
+        opacity: concept.enabled ? 1 : 0.5,
+        borderLeft: `3px solid ${style.border}`,
+      }}
+    >
+      <div
+        className="relative h-[140px] flex items-center justify-center rounded-tr-[var(--radius-sm)] bg-[var(--color-surface-raised)] overflow-hidden"
+        style={{ background: style.overlay }}
+        onClick={onOpen}
+      >
+        {thumbnailUrl && !thumbnailError ? (
+          <img
+            src={thumbnailUrl}
+            alt={displayName}
+            className="w-full h-full object-cover"
+            onError={() => setThumbnailError(true)}
+          />
+        ) : (
+          <ImageIcon className="w-12 h-12 text-[var(--color-on-surface-secondary)]" strokeWidth={1} />
+        )}
+      </div>
+
+      <div className="px-3 py-2.5 flex flex-col gap-1.5">
+        <span
+          className="text-sm font-medium text-[var(--color-on-surface)] break-words leading-snug"
+          title={displayName}
+        >
+          {displayName}
+        </span>
+        <span
+          className="inline-flex self-start px-2 py-0.5 rounded-[var(--radius-full)] text-[10px] font-semibold uppercase tracking-wider"
+          style={{
+            backgroundColor: style.badgeBg,
+            color: style.badgeText,
+          }}
+        >
+          {style.label}
+        </span>
+      </div>
+
+      <div className="absolute top-1 left-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className="w-6 h-6 flex items-center justify-center rounded-[var(--radius-sm)] bg-[var(--color-error-500)] text-white text-xs hover:brightness-110 cursor-pointer"
+          aria-label="Remove concept"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onClone();
+          }}
+          className="w-6 h-6 flex items-center justify-center rounded-[var(--radius-sm)] bg-[var(--color-success-500)] text-white text-xs hover:brightness-110 cursor-pointer"
+          aria-label="Clone concept"
+        >
+          <Copy className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <div className="absolute top-1 right-1" onClick={(e) => e.stopPropagation()}>
+        <Toggle value={concept.enabled} onChange={onToggle} />
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ConceptGeneralTab.tsx b/web/gui/src/renderer/components/concepts/ConceptGeneralTab.tsx
new file mode 100644
index 000000000..20a7e69a8
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ConceptGeneralTab.tsx
@@ -0,0 +1,84 @@
+import { DirPicker, FilePicker, FormEntry, Select, Toggle } from "@/components/shared";
+import type { ConceptConfig } from "@/types/generated/config";
+import { PROMPT_SOURCES } from "@/types/generated/dropdownSources";
+import { BalancingStrategyValues, ConceptTypeValues } from "@/types/generated/enums";
+
+export interface ConceptGeneralTabProps {
+  draft: ConceptConfig;
+  update: (path: string, value: unknown) => void;
+  updateText: (field: keyof ConceptConfig["text"], value: unknown) => void;
+}
+
+export function ConceptGeneralTab({ draft, update, updateText }: ConceptGeneralTabProps) {
+  return (
+    <div className="grid grid-cols-[140px_1fr] gap-x-4 gap-y-3 items-center">
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Name</span>
+      <FormEntry label="" value={draft.name} onChange={(v) => update("name", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Enabled</span>
+      <Toggle value={draft.enabled} onChange={(v) => update("enabled", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Concept Type</span>
+      <Select label="" options={ConceptTypeValues} value={draft.type} onChange={(v) => update("type", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Path</span>
+      <DirPicker
+        label=""
+        value={draft.path}
+        onChange={(v) => update("path", v)}
+        tooltip="Directory containing training images"
+      />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt Source</span>
+      <Select
+        label=""
+        options={PROMPT_SOURCES}
+        value={draft.text.prompt_source}
+        onChange={(v) => updateText("prompt_source", v)}
+      />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt Path</span>
+      <FilePicker
+        label=""
+        value={draft.text.prompt_path}
+        onChange={(v) => updateText("prompt_path", v)}
+        disabled={draft.text.prompt_source !== "concept"}
+      />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Include Subdirectories</span>
+      <Toggle value={draft.include_subdirectories} onChange={(v) => update("include_subdirectories", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Image Variations</span>
+      <FormEntry
+        label=""
+        type="number"
+        value={draft.image_variations}
+        onChange={(v) => update("image_variations", v)}
+      />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Text Variations</span>
+      <FormEntry label="" type="number" value={draft.text_variations} onChange={(v) => update("text_variations", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Balancing</span>
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <FormEntry label="" type="number" value={draft.balancing} onChange={(v) => update("balancing", v)} />
+        </div>
+        <div className="w-36">
+          <Select
+            label=""
+            options={BalancingStrategyValues}
+            value={draft.balancing_strategy}
+            onChange={(v) => update("balancing_strategy", v)}
+          />
+        </div>
+      </div>
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Loss Weight</span>
+      <FormEntry label="" type="number" value={draft.loss_weight} onChange={(v) => update("loss_weight", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Seed</span>
+      <FormEntry label="" type="number" value={draft.seed} onChange={(v) => update("seed", v)} />
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ConceptGrid.tsx b/web/gui/src/renderer/components/concepts/ConceptGrid.tsx
new file mode 100644
index 000000000..89f3fd434
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ConceptGrid.tsx
@@ -0,0 +1,123 @@
+import { FilterX, Plus, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/shared";
+import type { ConceptConfig } from "@/types/generated/config";
+
+import { ConceptCard } from "./ConceptCard";
+
+export interface ConceptGridProps {
+  concepts: ConceptConfig[];
+  onAdd: () => void;
+  onOpen: (index: number) => void;
+  onRemove: (index: number) => void;
+  onClone: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+}
+
+export function ConceptGrid({ concepts, onAdd, onOpen, onRemove, onClone, onToggle }: ConceptGridProps) {
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState("ALL");
+  const [showDisabled, setShowDisabled] = useState(true);
+
+  const disabledCount = concepts.filter((c) => !c.enabled).length;
+
+  const filtered = useMemo(() => {
+    return concepts
+      .map((c, i) => ({ concept: c, originalIndex: i }))
+      .filter(({ concept }) => {
+        if (!showDisabled && !concept.enabled) return false;
+        if (typeFilter !== "ALL" && concept.type !== typeFilter) return false;
+        if (search) {
+          const q = search.toLowerCase();
+          const name = (concept.name || "").toLowerCase();
+          const path = (concept.path || "").toLowerCase();
+          if (!name.includes(q) && !path.includes(q)) return false;
+        }
+        return true;
+      });
+  }, [concepts, search, typeFilter, showDisabled]);
+
+  const clearFilters = () => {
+    setSearch("");
+    setTypeFilter("ALL");
+    setShowDisabled(true);
+  };
+  const hasFilters = search !== "" || typeFilter !== "ALL" || !showDisabled;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="primary" size="sm" onClick={onAdd}>
+          <Plus className="w-4 h-4" /> Add Concept
+        </Button>
+
+        <div className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-sm)] bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]">
+          <Search className="w-4 h-4 text-[var(--color-on-surface-secondary)]" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search concepts..."
+            className="bg-transparent text-sm text-[var(--color-on-surface)] outline-none w-48"
+          />
+        </div>
+
+        <select
+          value={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value)}
+          className="px-3 py-1.5 rounded-[var(--radius-sm)] text-sm bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-[var(--color-on-surface)] cursor-pointer"
+        >
+          <option value="ALL">All Types</option>
+          <option value="STANDARD">Standard</option>
+          <option value="VALIDATION">Validation</option>
+          <option value="PRIOR_PREDICTION">Prior Prediction</option>
+        </select>
+
+        <label className="flex items-center gap-2 text-sm text-[var(--color-on-surface-secondary)] cursor-pointer">
+          <input
+            type="checkbox"
+            checked={showDisabled}
+            onChange={(e) => setShowDisabled(e.target.checked)}
+            className="accent-[var(--color-cobalt-600)]"
+          />
+          Show Disabled{disabledCount > 0 ? ` (${disabledCount})` : ""}
+        </label>
+
+        {hasFilters && (
+          <button
+            onClick={clearFilters}
+            className="flex items-center gap-1 text-sm text-[var(--color-cobalt-600)] hover:text-[var(--color-cobalt-600)] cursor-pointer"
+          >
+            <FilterX className="w-4 h-4" /> Clear
+          </button>
+        )}
+
+        <span className="ml-auto text-xs text-[var(--color-on-surface-secondary)]">
+          {filtered.length} / {concepts.length} concepts
+        </span>
+      </div>
+
+      {filtered.length > 0 ? (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4">
+          {filtered.map(({ concept, originalIndex }) => (
+            <ConceptCard
+              key={originalIndex}
+              concept={concept}
+              index={originalIndex}
+              onOpen={() => onOpen(originalIndex)}
+              onRemove={() => onRemove(originalIndex)}
+              onClone={() => onClone(originalIndex)}
+              onToggle={(enabled) => onToggle(originalIndex, enabled)}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center py-16 text-[var(--color-on-surface-secondary)]">
+          <p className="text-sm">
+            {concepts.length === 0 ? "No concepts yet. Add one to get started." : "No concepts match current filters."}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ConceptImageAugTab.tsx b/web/gui/src/renderer/components/concepts/ConceptImageAugTab.tsx
new file mode 100644
index 000000000..c3e06f91f
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ConceptImageAugTab.tsx
@@ -0,0 +1,151 @@
+import { FormEntry, SliderEntry, Toggle } from "@/components/shared";
+import type { ConceptConfig, ConceptImageConfig } from "@/types/generated/config";
+
+import { ImagePreviewPanel } from "./ImagePreviewPanel";
+
+export interface ConceptImageAugTabProps {
+  draft: ConceptConfig;
+  updateImage: (field: keyof ConceptImageConfig, value: unknown) => void;
+}
+
+interface AugRow {
+  label: string;
+  random?: keyof ConceptImageConfig;
+  fixed?: keyof ConceptImageConfig;
+  value?: keyof ConceptImageConfig;
+  valuePlaceholder?: string;
+  valueType?: "number" | "text";
+  slider?: { min: number; max: number; step: number };
+}
+
+const AUG_ROWS: AugRow[] = [
+  { label: "Crop Jitter", random: "enable_crop_jitter" },
+  { label: "Random Flip", random: "enable_random_flip", fixed: "enable_fixed_flip" },
+  {
+    label: "Random Rotation",
+    random: "enable_random_rotate",
+    fixed: "enable_fixed_rotate",
+    value: "random_rotate_max_angle",
+    valuePlaceholder: "Max angle",
+    valueType: "number",
+    slider: { min: 0, max: 360, step: 1 },
+  },
+  {
+    label: "Random Brightness",
+    random: "enable_random_brightness",
+    fixed: "enable_fixed_brightness",
+    value: "random_brightness_max_strength",
+    valuePlaceholder: "Max strength",
+    valueType: "number",
+    slider: { min: 0, max: 1, step: 0.01 },
+  },
+  {
+    label: "Random Contrast",
+    random: "enable_random_contrast",
+    fixed: "enable_fixed_contrast",
+    value: "random_contrast_max_strength",
+    valuePlaceholder: "Max strength",
+    valueType: "number",
+    slider: { min: 0, max: 1, step: 0.01 },
+  },
+  {
+    label: "Random Saturation",
+    random: "enable_random_saturation",
+    fixed: "enable_fixed_saturation",
+    value: "random_saturation_max_strength",
+    valuePlaceholder: "Max strength",
+    valueType: "number",
+    slider: { min: 0, max: 1, step: 0.01 },
+  },
+  {
+    label: "Random Hue",
+    random: "enable_random_hue",
+    fixed: "enable_fixed_hue",
+    value: "random_hue_max_strength",
+    valuePlaceholder: "Max strength",
+    valueType: "number",
+    slider: { min: 0, max: 1, step: 0.01 },
+  },
+  { label: "Circular Mask Generation", random: "enable_random_circular_mask_shrink" },
+  { label: "Random Rotate & Crop", random: "enable_random_mask_rotate_crop" },
+  {
+    label: "Resolution Override",
+    fixed: "enable_resolution_override",
+    value: "resolution_override",
+    valuePlaceholder: "e.g. 512 or 768x512",
+    valueType: "text",
+  },
+];
+
+export function ConceptImageAugTab({ draft, updateImage }: ConceptImageAugTabProps) {
+  return (
+    <div className="flex gap-6">
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <div className="grid grid-cols-[minmax(160px,auto)_48px_48px_1fr] gap-x-3 gap-y-0 items-center text-xs font-semibold text-[var(--color-on-surface-secondary)] uppercase">
+          <span>Augmentation</span>
+          <span className="text-center">Random</span>
+          <span className="text-center">Fixed</span>
+          <span>Value</span>
+        </div>
+
+        {AUG_ROWS.map((row) => {
+          const { random, fixed, value } = row;
+          return (
+            <div
+              key={row.label}
+              className="grid grid-cols-[minmax(160px,auto)_48px_48px_1fr] gap-x-3 items-center py-1"
+            >
+              <span className="text-sm font-medium text-[var(--color-on-surface)]">{row.label}</span>
+
+              <div className="flex justify-center">
+                {random ? (
+                  <Toggle value={draft.image[random] as boolean} onChange={(v) => updateImage(random, v)} />
+                ) : (
+                  <span />
+                )}
+              </div>
+
+              <div className="flex justify-center">
+                {fixed ? (
+                  <Toggle value={draft.image[fixed] as boolean} onChange={(v) => updateImage(fixed, v)} />
+                ) : (
+                  <span />
+                )}
+              </div>
+
+              <div>
+                {value && row.slider ? (
+                  <SliderEntry
+                    label=""
+                    value={draft.image[value] as number}
+                    onChange={(v) => updateImage(value, v)}
+                    min={row.slider.min}
+                    max={row.slider.max}
+                    step={row.slider.step}
+                  />
+                ) : value ? (
+                  <FormEntry
+                    label=""
+                    type={row.valueType ?? "text"}
+                    value={draft.image[value] as string | number}
+                    onChange={(v) => updateImage(value, v)}
+                    placeholder={row.valuePlaceholder}
+                  />
+                ) : (
+                  <span />
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <ImagePreviewPanel
+        conceptPath={draft.path}
+        includeSubdirectories={draft.include_subdirectories}
+        textConfig={draft.text}
+        imageConfig={draft.image}
+      />
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ConceptStatsPanel.tsx b/web/gui/src/renderer/components/concepts/ConceptStatsPanel.tsx
new file mode 100644
index 000000000..983059c8e
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ConceptStatsPanel.tsx
@@ -0,0 +1,376 @@
+import { useCallback, useState } from "react";
+
+import { configApi } from "@/api/configApi";
+import { Button, Tooltip } from "@/components/shared";
+
+import { AspectBucketChart } from "./AspectBucketChart";
+
+export interface ConceptStatsPanelProps {
+  conceptPath: string;
+  includeSubdirectories: boolean;
+}
+
+interface StatValue {
+  label: string;
+  value: string;
+  tooltip?: string;
+}
+
+/* ── Format helpers ────────────────────────────────────────── */
+
+function formatPixelStat(raw: unknown): string {
+  if (typeof raw === "string") return "-";
+  if (Array.isArray(raw)) {
+    const [pixels, file, resolution] = raw;
+    const mp = (pixels / 1_000_000).toFixed(2);
+    return `${mp} MP, ${resolution}\n${file}`;
+  }
+  if (typeof raw === "number") {
+    const mp = (raw / 1_000_000).toFixed(2);
+    const side = Math.round(Math.sqrt(raw));
+    return `${mp} MP, ~${side}w x ${side}h`;
+  }
+  return "-";
+}
+
+function formatLengthStat(raw: unknown): string {
+  if (typeof raw === "string") return "-";
+  if (Array.isArray(raw)) return `${Math.round(raw[0])} frames\n${raw[1]}`;
+  if (typeof raw === "number") return `${Math.round(raw)} frames`;
+  return "-";
+}
+
+function formatFpsStat(raw: unknown): string {
+  if (typeof raw === "string") return "-";
+  if (Array.isArray(raw)) return `${Math.round(raw[0])} fps\n${raw[1]}`;
+  if (typeof raw === "number") return `${Math.round(raw)} fps`;
+  return "-";
+}
+
+function formatCaptionStat(raw: unknown): string {
+  if (typeof raw === "string") return "-";
+  if (Array.isArray(raw)) {
+    if (raw.length >= 3) return `${raw[0]} chars, ${raw[2]} words\n${raw[1]}`;
+    if (raw.length >= 2) return `${Math.round(raw[0])} chars, ${Math.round(raw[1])} words`;
+  }
+  return "-";
+}
+
+function decimalToAspectRatio(value: number): string {
+  let bestNum = 1;
+  let bestDen = 1;
+  let bestError = Math.abs(value - 1);
+  for (let den = 1; den <= 16; den++) {
+    const num = Math.round(value * den);
+    if (num < 1) continue;
+    const error = Math.abs(value - num / den);
+    if (error < bestError) {
+      bestError = error;
+      bestNum = num;
+      bestDen = den;
+    }
+  }
+  return `${bestDen}:${bestNum}`;
+}
+
+function computeSmallestBuckets(buckets: Record<string, number>): string {
+  const nonZero = Object.entries(buckets)
+    .filter(([, v]) => v > 0)
+    .map(([k, v]) => ({ ratio: parseFloat(k), count: v }));
+
+  if (nonZero.length === 0) return "-";
+
+  nonZero.sort((a, b) => a.count - b.count);
+  const minVal = nonZero[0].count;
+  const minVal2 = nonZero.length > 1 && nonZero[1].count > minVal ? nonZero[1].count : minVal;
+
+  return nonZero
+    .filter((e) => e.count === minVal || e.count === minVal2)
+    .map((e) => `aspect ${decimalToAspectRatio(e.ratio)} : ${e.count} img`)
+    .join("\n");
+}
+
+/* ── Stat label with optional tooltip ──────────────────────── */
+
+function StatLabel({ label, tooltip }: { label: string; tooltip?: string }) {
+  const el = (
+    <span className="text-xs font-semibold text-[var(--color-on-surface-secondary)] underline decoration-dotted underline-offset-2">
+      {label}
+    </span>
+  );
+  if (tooltip) {
+    return <Tooltip content={tooltip}>{el}</Tooltip>;
+  }
+  return el;
+}
+
+/* ── Main component ────────────────────────────────────────── */
+
+export function ConceptStatsPanel({ conceptPath, includeSubdirectories }: ConceptStatsPanelProps) {
+  const [stats, setStats] = useState<Record<string, unknown> | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const [scanType, setScanType] = useState<"basic" | "advanced" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const runScan = useCallback(
+    async (advanced: boolean) => {
+      if (!conceptPath) return;
+      setScanning(true);
+      setScanType(advanced ? "advanced" : "basic");
+      setError(null);
+      try {
+        const result = await configApi.conceptStats(conceptPath, includeSubdirectories, advanced);
+        setStats(result);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        console.error("Stats scan failed:", err);
+        setError(msg);
+      } finally {
+        setScanning(false);
+        setScanType(null);
+      }
+    },
+    [conceptPath, includeSubdirectories],
+  );
+
+  const handleCancel = useCallback(async () => {
+    try {
+      await configApi.cancelConceptStats();
+    } catch (err) {
+      console.error("Cancel failed:", err);
+    }
+  }, []);
+
+  const s = stats ?? {};
+
+  const fileSize = typeof s.file_size === "number" ? `${Math.round(s.file_size / 1_048_576)} MB` : "-";
+  const processingTime = typeof s.processing_time === "number" ? `${(s.processing_time as number).toFixed(2)} s` : "-";
+
+  /* ── Stat definitions ────────────────────────────────────── */
+
+  const basicStats: StatValue[][] = [
+    [
+      { label: "Total Size", value: fileSize, tooltip: "Total size of all image, mask, and caption files in MB" },
+      {
+        label: "Directories",
+        value: String(s.directory_count ?? "-"),
+        tooltip:
+          "Total number of directories including and under (if 'include subdirectories' is enabled) the main concept directory",
+      },
+    ],
+    [
+      {
+        label: "Total Images",
+        value: String(s.image_count ?? "-"),
+        tooltip: "Total number of image files, excluding mask and condition label files",
+      },
+      { label: "Total Videos", value: String(s.video_count ?? "-"), tooltip: "Total number of video files" },
+      {
+        label: "Total Masks",
+        value: String(s.mask_count ?? "-"),
+        tooltip: "Total number of mask files (ending in '-masklabel.png')",
+      },
+      {
+        label: "Total Captions",
+        value:
+          s.subcaption_count && typeof s.subcaption_count === "number" && s.subcaption_count > 0
+            ? `${s.caption_count} (${s.subcaption_count})`
+            : String(s.caption_count ?? "-"),
+        tooltip:
+          "Total number of caption files (.txt). With advanced scan, includes the total number of captions on separate lines across all files in parentheses.",
+      },
+    ],
+    [
+      {
+        label: "Images with Masks",
+        value: String(s.image_with_mask_count ?? "-"),
+        tooltip: "Total number of image files with an associated mask",
+      },
+      {
+        label: "Unpaired Masks",
+        value: String(s.unpaired_masks ?? "-"),
+        tooltip: "Total number of mask files which lack a corresponding image file — if > 0, check your dataset!",
+      },
+    ],
+    [
+      {
+        label: "Images with Captions",
+        value: String(s.image_with_caption_count ?? "-"),
+        tooltip: "Total number of image files with an associated caption",
+      },
+      {
+        label: "Videos with Captions",
+        value: String(s.video_with_caption_count ?? "-"),
+        tooltip: "Total number of video files with an associated caption",
+      },
+      {
+        label: "Unpaired Captions",
+        value: String(s.unpaired_captions ?? "-"),
+        tooltip:
+          "Total number of caption files which lack a corresponding image file — if > 0, check your dataset! If using 'from file name' or 'from single text file' this can be ignored.",
+      },
+    ],
+  ];
+
+  const advancedStats: StatValue[][] = [
+    [
+      {
+        label: "Max Pixels",
+        value: formatPixelStat(s.max_pixels),
+        tooltip: "Largest image in the concept by number of pixels (width x height)",
+      },
+      {
+        label: "Avg Pixels",
+        value: formatPixelStat(s.avg_pixels),
+        tooltip: "Average size of images in the concept by number of pixels (width x height)",
+      },
+      {
+        label: "Min Pixels",
+        value: formatPixelStat(s.min_pixels),
+        tooltip: "Smallest image in the concept by number of pixels (width x height)",
+      },
+    ],
+    [
+      {
+        label: "Max Length",
+        value: formatLengthStat(s.max_length),
+        tooltip: "Longest video in the concept by number of frames",
+      },
+      {
+        label: "Avg Length",
+        value: formatLengthStat(s.avg_length),
+        tooltip: "Average length of videos in the concept by number of frames",
+      },
+      {
+        label: "Min Length",
+        value: formatLengthStat(s.min_length),
+        tooltip: "Shortest video in the concept by number of frames",
+      },
+    ],
+    [
+      { label: "Max FPS", value: formatFpsStat(s.max_fps), tooltip: "Video in concept with highest fps" },
+      { label: "Avg FPS", value: formatFpsStat(s.avg_fps), tooltip: "Average fps of videos in the concept" },
+      { label: "Min FPS", value: formatFpsStat(s.min_fps), tooltip: "Video in concept with the lowest fps" },
+    ],
+    [
+      {
+        label: "Max Caption Length",
+        value: formatCaptionStat(s.max_caption_length),
+        tooltip: "Largest caption in concept by character count. For token count, assume ~2 tokens/word",
+      },
+      {
+        label: "Avg Caption Length",
+        value: formatCaptionStat(s.avg_caption_length),
+        tooltip: "Average length of caption in concept by character count. For token count, assume ~2 tokens/word",
+      },
+      {
+        label: "Min Caption Length",
+        value: formatCaptionStat(s.min_caption_length),
+        tooltip: "Smallest caption in concept by character count. For token count, assume ~2 tokens/word",
+      },
+    ],
+  ];
+
+  const aspectBuckets = (s.aspect_buckets ?? {}) as Record<string, number>;
+  const hasAspectData = Object.values(aspectBuckets).some((v) => v > 0);
+  const smallestBuckets = hasAspectData ? computeSmallestBuckets(aspectBuckets) : "-";
+
+  if (!conceptPath) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-[var(--color-on-surface-secondary)]">
+        <p className="text-sm">Set a concept path first to scan for statistics.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Toolbar */}
+      <div className="flex items-center gap-3">
+        <Button variant="primary" size="sm" onClick={() => runScan(false)} disabled={scanning}>
+          {scanning && scanType === "basic" ? "Scanning..." : "Refresh Basic"}
+        </Button>
+        <Button variant="primary" size="sm" onClick={() => runScan(true)} disabled={scanning}>
+          {scanning && scanType === "advanced" ? "Scanning..." : "Refresh Advanced"}
+        </Button>
+        <Button variant="secondary" size="sm" onClick={handleCancel} disabled={!scanning}>
+          Abort Scan
+        </Button>
+        <span className="ml-auto text-xs text-[var(--color-on-surface-secondary)]">
+          {processingTime !== "-" ? `Processed in ${processingTime}` : ""}
+        </span>
+      </div>
+
+      {/* Error banner */}
+      {error && (
+        <div className="px-3 py-2 rounded-[var(--radius-sm)] bg-[var(--color-error-500)]/10 border border-[var(--color-error-500)]/30 text-sm text-[var(--color-error-500)]">
+          Scan failed: {error}
+        </div>
+      )}
+
+      {stats === null ? (
+        <div className="flex flex-col items-center justify-center py-12 text-[var(--color-on-surface-secondary)]">
+          <p className="text-sm">
+            Click {'"'}Refresh Basic{'"'} or {'"'}Refresh Advanced{'"'} to scan concept statistics.
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {/* Basic stats */}
+          {basicStats.map((row, ri) => (
+            <div key={ri} className="grid grid-cols-4 gap-3">
+              {row.map((stat) => (
+                <div key={stat.label} className="flex flex-col gap-0.5">
+                  <StatLabel label={stat.label} tooltip={stat.tooltip} />
+                  <span className="text-sm text-[var(--color-on-surface)] whitespace-pre-line">{stat.value}</span>
+                </div>
+              ))}
+            </div>
+          ))}
+
+          {/* Advanced stats */}
+          {advancedStats.some((row) => row.some((stat) => stat.value !== "-")) && (
+            <>
+              <div className="border-t border-[var(--color-border-subtle)]" />
+              {advancedStats.map((row, ri) => (
+                <div key={`adv-${ri}`} className="grid grid-cols-3 gap-3">
+                  {row.map((stat) => (
+                    <div key={stat.label} className="flex flex-col gap-0.5">
+                      <StatLabel label={stat.label} tooltip={stat.tooltip} />
+                      <span className="text-xs text-[var(--color-on-surface)] whitespace-pre-line break-all">
+                        {stat.value}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </>
+          )}
+
+          {/* Aspect bucketing */}
+          {hasAspectData && (
+            <>
+              <div className="border-t border-[var(--color-border-subtle)]" />
+              <div className="grid grid-cols-[1fr_auto] gap-4 items-start">
+                <div className="flex flex-col gap-1">
+                  <StatLabel
+                    label="Aspect Bucketing"
+                    tooltip="Distribution of images across aspect ratio buckets (height/width). Buckets range from 0.25 (4:1, extremely wide) to 4 (1:4, extremely tall). Images that don't match a bucket exactly are cropped to the nearest one."
+                  />
+                  <AspectBucketChart buckets={aspectBuckets} />
+                </div>
+                <div className="flex flex-col gap-0.5 min-w-[160px]">
+                  <StatLabel
+                    label="Smallest Buckets"
+                    tooltip="Aspect ratio buckets with the fewest images. If your batch size is larger than the smallest bucket count, those images will be ignored during training!"
+                  />
+                  <span className="text-xs text-[var(--color-on-surface)] whitespace-pre-line">{smallestBuckets}</span>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ConceptTextAugTab.tsx b/web/gui/src/renderer/components/concepts/ConceptTextAugTab.tsx
new file mode 100644
index 000000000..f5740c4f0
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ConceptTextAugTab.tsx
@@ -0,0 +1,100 @@
+import { FormEntry, Select, Toggle } from "@/components/shared";
+import type { ConceptConfig } from "@/types/generated/config";
+import { TAG_DROPOUT_MODES, TAG_DROPOUT_SPECIAL_TAGS_MODES } from "@/types/generated/dropdownSources";
+
+export interface ConceptTextAugTabProps {
+  draft: ConceptConfig;
+  updateText: (field: keyof ConceptConfig["text"], value: unknown) => void;
+}
+
+export function ConceptTextAugTab({ draft, updateText }: ConceptTextAugTabProps) {
+  return (
+    <div className="grid grid-cols-[140px_1fr_140px_1fr] gap-x-4 gap-y-3 items-center">
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Tag Shuffling</span>
+      <Toggle value={draft.text.enable_tag_shuffling} onChange={(v) => updateText("enable_tag_shuffling", v)} />
+      <span />
+      <span />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Tag Delimiter</span>
+      <FormEntry label="" value={draft.text.tag_delimiter} onChange={(v) => updateText("tag_delimiter", v)} />
+      <span />
+      <span />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Keep Tag Count</span>
+      <FormEntry
+        label=""
+        type="number"
+        value={draft.text.keep_tags_count}
+        onChange={(v) => updateText("keep_tags_count", v)}
+      />
+      <span />
+      <span />
+
+      <div className="col-span-4 border-t border-[var(--color-border-subtle)] mt-1" />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Tag Dropout</span>
+      <Toggle value={draft.text.tag_dropout_enable} onChange={(v) => updateText("tag_dropout_enable", v)} />
+      <span />
+      <span />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Dropout Mode</span>
+      <Select
+        label=""
+        options={TAG_DROPOUT_MODES}
+        value={draft.text.tag_dropout_mode}
+        onChange={(v) => updateText("tag_dropout_mode", v)}
+      />
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Probability</span>
+      <FormEntry
+        label=""
+        type="number"
+        value={draft.text.tag_dropout_probability}
+        onChange={(v) => updateText("tag_dropout_probability", v)}
+      />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Special Tags</span>
+      <Select
+        label=""
+        options={TAG_DROPOUT_SPECIAL_TAGS_MODES}
+        value={draft.text.tag_dropout_special_tags_mode}
+        onChange={(v) => updateText("tag_dropout_special_tags_mode", v)}
+      />
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Tags</span>
+      <FormEntry
+        label=""
+        value={draft.text.tag_dropout_special_tags}
+        onChange={(v) => updateText("tag_dropout_special_tags", v)}
+      />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Special Tags Regex</span>
+      <Toggle
+        value={draft.text.tag_dropout_special_tags_regex}
+        onChange={(v) => updateText("tag_dropout_special_tags_regex", v)}
+      />
+      <span />
+      <span />
+
+      <div className="col-span-4 border-t border-[var(--color-border-subtle)] mt-1" />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Randomize Caps</span>
+      <Toggle value={draft.text.caps_randomize_enable} onChange={(v) => updateText("caps_randomize_enable", v)} />
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Force Lowercase</span>
+      <Toggle value={draft.text.caps_randomize_lowercase} onChange={(v) => updateText("caps_randomize_lowercase", v)} />
+
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Caps Mode</span>
+      <FormEntry
+        label=""
+        value={draft.text.caps_randomize_mode}
+        onChange={(v) => updateText("caps_randomize_mode", v)}
+        placeholder="capslock,title,first,random"
+      />
+      <span className="text-sm font-medium text-[var(--color-on-surface)]">Probability</span>
+      <FormEntry
+        label=""
+        type="number"
+        value={draft.text.caps_randomize_probability}
+        onChange={(v) => updateText("caps_randomize_probability", v)}
+      />
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/concepts/ImagePreviewPanel.tsx b/web/gui/src/renderer/components/concepts/ImagePreviewPanel.tsx
new file mode 100644
index 000000000..eb99e02bb
--- /dev/null
+++ b/web/gui/src/renderer/components/concepts/ImagePreviewPanel.tsx
@@ -0,0 +1,214 @@
+import { ChevronLeft, ChevronRight, Dice5, ImageIcon, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { configApi } from "@/api/configApi";
+import { Button } from "@/components/shared";
+import type { ConceptImageConfig, ConceptTextConfig } from "@/types/generated/config";
+
+export interface ImagePreviewPanelProps {
+  conceptPath: string;
+  includeSubdirectories: boolean;
+  textConfig: ConceptTextConfig;
+  imageConfig?: ConceptImageConfig;
+}
+
+interface ImageEntry {
+  filename: string;
+  path: string;
+  caption: string | null;
+}
+
+export function ImagePreviewPanel({
+  conceptPath,
+  includeSubdirectories,
+  textConfig,
+  imageConfig,
+}: ImagePreviewPanelProps) {
+  const [images, setImages] = useState<ImageEntry[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [conceptCaption, setConceptCaption] = useState<string | null>(null);
+
+  const [showAugmented, setShowAugmented] = useState(false);
+  const [augSeed, setAugSeed] = useState<number>(() => Math.floor(Math.random() * 2 ** 30));
+  const [augBase64, setAugBase64] = useState<string | null>(null);
+  const [augLoading, setAugLoading] = useState(false);
+  const augTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    if (!conceptPath) {
+      setImages([]);
+      setCurrentIndex(0);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+
+    configApi
+      .conceptImages(conceptPath, includeSubdirectories)
+      .then((result) => {
+        if (cancelled) return;
+        setImages(result.images);
+        setCurrentIndex(0);
+        setLoading(false);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setImages([]);
+        setCurrentIndex(0);
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [conceptPath, includeSubdirectories]);
+
+  useEffect(() => {
+    if (textConfig.prompt_source !== "concept" || !textConfig.prompt_path) {
+      setConceptCaption(null);
+      return;
+    }
+
+    let cancelled = false;
+    configApi
+      .conceptTextFile(textConfig.prompt_path)
+      .then((result) => {
+        if (!cancelled) setConceptCaption(result.content);
+      })
+      .catch(() => {
+        if (!cancelled) setConceptCaption(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [textConfig.prompt_source, textConfig.prompt_path]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentIndex((i) => Math.max(0, i - 1));
+  }, []);
+
+  const handleNext = useCallback(() => {
+    setCurrentIndex((i) => Math.min(images.length - 1, i + 1));
+  }, [images.length]);
+
+  const currentImage = images[currentIndex] ?? null;
+
+  let displayCaption = "";
+  if (currentImage) {
+    if (textConfig.prompt_source === "filename") {
+      const stem = currentImage.filename.replace(/\.[^.]+$/, "");
+      displayCaption = stem || "[Empty prompt]";
+    } else if (textConfig.prompt_source === "concept") {
+      displayCaption = conceptCaption ?? "[No concept file loaded]";
+    } else {
+      displayCaption = currentImage.caption ?? "[No caption file]";
+    }
+  }
+
+  const imageUrl = currentImage ? configApi.conceptImageUrl(currentImage.path) : null;
+
+  useEffect(() => {
+    if (!showAugmented || !currentImage || !imageConfig) {
+      setAugBase64(null);
+      return;
+    }
+    setAugLoading(true);
+    if (augTimer.current) clearTimeout(augTimer.current);
+    augTimer.current = setTimeout(async () => {
+      try {
+        const res = await configApi.augmentationPreview({
+          image_path: currentImage.path,
+          image: imageConfig as unknown as Record<string, unknown>,
+          seed: augSeed,
+        });
+        if (res.ok) setAugBase64(res.image_base64);
+      } catch {
+        setAugBase64(null);
+      } finally {
+        setAugLoading(false);
+      }
+    }, 250);
+    return () => {
+      if (augTimer.current) clearTimeout(augTimer.current);
+    };
+  }, [showAugmented, currentImage, imageConfig, augSeed]);
+
+  const rerollAugSeed = () => setAugSeed(Math.floor(Math.random() * 2 ** 30));
+
+  return (
+    <div className="w-[300px] flex-shrink-0 flex flex-col gap-3">
+      <div className="w-[300px] h-[300px] rounded-[var(--radius-sm)] bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] flex items-center justify-center overflow-hidden relative">
+        {loading ? (
+          <span className="text-xs text-[var(--color-on-surface-secondary)]">Loading...</span>
+        ) : showAugmented && augBase64 ? (
+          <img
+            src={`data:image/png;base64,${augBase64}`}
+            alt="Augmented preview"
+            className="max-w-full max-h-full object-contain"
+          />
+        ) : imageUrl ? (
+          <img src={imageUrl} alt={currentImage?.filename ?? ""} className="max-w-full max-h-full object-contain" />
+        ) : (
+          <ImageIcon className="w-16 h-16 text-[var(--color-on-surface-secondary)]" strokeWidth={1} />
+        )}
+        {showAugmented && augLoading && (
+          <span className="absolute bottom-1 right-1 text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-surface-container)] text-[var(--color-on-surface-secondary)]">
+            updating…
+          </span>
+        )}
+      </div>
+
+      {imageConfig && (
+        <div className="flex items-center gap-2">
+          <label className="flex items-center gap-1 text-xs cursor-pointer text-[var(--color-on-surface)]">
+            <input
+              type="checkbox"
+              checked={showAugmented}
+              onChange={(e) => setShowAugmented(e.target.checked)}
+              className="accent-[var(--color-cobalt-600)]"
+            />
+            <Sparkles className="w-3 h-3" /> Augmentations
+          </label>
+          {showAugmented && (
+            <Button variant="secondary" size="sm" onClick={rerollAugSeed} title="Reroll augmentation seed">
+              <Dice5 className="w-3.5 h-3.5" />
+            </Button>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-2">
+        <Button variant="secondary" size="sm" onClick={handlePrev} disabled={currentIndex <= 0 || images.length === 0}>
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+        <span className="flex-1 text-center text-xs text-[var(--color-on-surface-secondary)]">
+          {images.length > 0 ? `${currentIndex + 1} / ${images.length}` : "No images"}
+        </span>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleNext}
+          disabled={currentIndex >= images.length - 1 || images.length === 0}
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {currentImage && (
+        <p className="text-xs text-[var(--color-on-surface-secondary)] break-all leading-snug px-1">
+          {currentImage.filename}
+        </p>
+      )}
+
+      <textarea
+        readOnly
+        value={displayCaption}
+        className="w-full h-[150px] text-xs text-[var(--color-on-surface)] bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] p-2 resize-none"
+        style={{ wordWrap: "break-word" }}
+      />
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/embeddings/EmbeddingCard.tsx b/web/gui/src/renderer/components/embeddings/EmbeddingCard.tsx
new file mode 100644
index 000000000..e5dc3822b
--- /dev/null
+++ b/web/gui/src/renderer/components/embeddings/EmbeddingCard.tsx
@@ -0,0 +1,64 @@
+import { ArrayItemHeader, FormEntry, PathPicker, Toggle } from "@/components/shared";
+import type { TrainEmbeddingConfig } from "@/types/generated/config";
+
+export interface EmbeddingCardProps {
+  embedding: TrainEmbeddingConfig;
+  index: number;
+  onClone: (index: number) => void;
+  onRemove: (index: number) => void;
+  onToggleTrain: (index: number, value: boolean) => void;
+}
+
+export function EmbeddingCard({ embedding, index, onClone, onRemove, onToggleTrain }: EmbeddingCardProps) {
+  const p = `additional_embeddings.${index}`;
+
+  return (
+    <div className="rounded-[var(--radius-md)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] p-4">
+      <ArrayItemHeader
+        title={embedding.placeholder?.trim() || `Embedding ${index + 1}`}
+        onClone={() => onClone(index)}
+        onRemove={() => onRemove(index)}
+      >
+        <Toggle value={embedding.train} onChange={(v) => onToggleTrain(index, v)} />
+      </ArrayItemHeader>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <PathPicker
+          label="Base Embedding"
+          mode="file"
+          configPath={`${p}.model_name`}
+          tooltip="The base embedding to train on. Leave empty to create a new embedding."
+        />
+        <FormEntry
+          label="Placeholder"
+          configPath={`${p}.placeholder`}
+          tooltip="The placeholder used when using the embedding in a prompt."
+        />
+        <FormEntry
+          label="Token Count"
+          configPath={`${p}.token_count`}
+          type="number"
+          nullable
+          tooltip="Token count for new embedding. Leave empty to auto-detect from the initial text."
+        />
+        <FormEntry
+          label="Initial Embedding Text"
+          configPath={`${p}.initial_embedding_text`}
+          tooltip="The initial embedding text used when creating a new embedding."
+        />
+        <Toggle
+          configPath={`${p}.is_output_embedding`}
+          label="Output Embedding"
+          tooltip="Output embeddings are calculated at the output of the text encoder, not the input. Better for larger TEs and lower VRAM."
+        />
+        <FormEntry
+          label="Stop Training After"
+          configPath={`${p}.stop_training_after`}
+          type="number"
+          nullable
+          tooltip="When to stop training the embedding."
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/embeddings/EmbeddingList.tsx b/web/gui/src/renderer/components/embeddings/EmbeddingList.tsx
new file mode 100644
index 000000000..9fcbe1431
--- /dev/null
+++ b/web/gui/src/renderer/components/embeddings/EmbeddingList.tsx
@@ -0,0 +1,46 @@
+import { Plus } from "lucide-react";
+
+import { Button, EmptyState } from "@/components/shared";
+import type { TrainEmbeddingConfig } from "@/types/generated/config";
+
+import { EmbeddingCard } from "./EmbeddingCard";
+
+export interface EmbeddingListProps {
+  embeddings: TrainEmbeddingConfig[];
+  onAdd: () => void;
+  onClone: (index: number) => void;
+  onRemove: (index: number) => void;
+  onToggleTrain: (index: number, value: boolean) => void;
+}
+
+export function EmbeddingList({ embeddings, onAdd, onClone, onRemove, onToggleTrain }: EmbeddingListProps) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <Button variant="primary" size="sm" onClick={onAdd}>
+          <Plus className="w-4 h-4" /> Add Embedding
+        </Button>
+        <span className="text-xs text-[var(--color-on-surface-secondary)] ml-auto">
+          {embeddings.length} embedding{embeddings.length === 1 ? "" : "s"}
+        </span>
+      </div>
+
+      {embeddings.length === 0 ? (
+        <EmptyState title="No additional embeddings" description="Add an embedding to train it alongside your model." />
+      ) : (
+        <div className="flex flex-col gap-3">
+          {embeddings.map((emb, idx) => (
+            <EmbeddingCard
+              key={emb.uuid || idx}
+              embedding={emb}
+              index={idx}
+              onClone={onClone}
+              onRemove={onRemove}
+              onToggleTrain={onToggleTrain}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/layout/BottomBar.tsx b/web/gui/src/renderer/components/layout/BottomBar.tsx
new file mode 100644
index 000000000..3b6144216
--- /dev/null
+++ b/web/gui/src/renderer/components/layout/BottomBar.tsx
@@ -0,0 +1,262 @@
+import {
+  BarChart3,
+  Bug,
+  Camera,
+  Clock,
+  Download,
+  HardDrive,
+  Loader2,
+  Play,
+  RefreshCw,
+  Save,
+  Square,
+  Terminal,
+  Timer,
+} from "lucide-react";
+
+import { configApi } from "@/api/configApi";
+import { toolsApi } from "@/api/toolsApi";
+import { DualProgress } from "@/components/shared";
+import { useElapsedTime } from "@/hooks/useElapsedTime";
+import { getByPath, useConfigStore } from "@/store/configStore";
+import { useTrainingStore } from "@/store/trainingStore";
+import { useUiStore } from "@/store/uiStore";
+import { formatDuration } from "@/utils/formatDuration";
+
+export default function BottomBar() {
+  const exportConfig = useConfigStore((s) => s.exportConfig);
+  const isDirty = useConfigStore((s) => s.isDirty);
+  const loadedPresetName = useConfigStore((s) => s.loadedPresetName);
+  const configError = useConfigStore((s) => s.error);
+  const clearConfigError = useConfigStore((s) => s.clearError);
+
+  const config = useConfigStore((s) => s.config);
+  const cloudEnabled = config
+    ? getByPath(config as unknown as Record<string, unknown>, "cloud.enabled") === true
+    : false;
+
+  const backendConnected = useUiStore((s) => s.backendConnected);
+  const terminalOpen = useUiStore((s) => s.terminalOpen);
+  const toggleTerminal = useUiStore((s) => s.toggleTerminal);
+  const status = useTrainingStore((s) => s.status);
+  const progress = useTrainingStore((s) => s.progress);
+  const statusText = useTrainingStore((s) => s.statusText);
+  const error = useTrainingStore((s) => s.error);
+  const latestSample = useTrainingStore((s) => s.latestSample);
+  const startTraining = useTrainingStore((s) => s.startTraining);
+  const stopTraining = useTrainingStore((s) => s.stopTraining);
+  const sampleNow = useTrainingStore((s) => s.sampleNow);
+  const backupNow = useTrainingStore((s) => s.backupNow);
+  const saveNow = useTrainingStore((s) => s.saveNow);
+
+  const startTime = useTrainingStore((s) => s.startTime);
+
+  const isActive = status === "training" || status === "preparing";
+  const isStopping = statusText === "Stopping...";
+
+  // Elapsed time ticker (updates every second during training)
+  const elapsed = useElapsedTime(startTime, status === "training");
+
+  const epochProgress = progress ? (progress.maxEpoch > 0 ? (progress.epoch / progress.maxEpoch) * 100 : 0) : 0;
+  const stepProgress = progress ? (progress.maxStep > 0 ? (progress.step / progress.maxStep) * 100 : 0) : 0;
+
+  const handleExport = async () => {
+    try {
+      const config = await exportConfig();
+      const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "train_config.json";
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      /* handled by store */
+    }
+  };
+
+  const handleDebugPackage = async () => {
+    try {
+      await toolsApi.downloadDebugPackage();
+    } catch {
+      /* surfaced via console by fetch failure; no dedicated error UI for this action */
+    }
+  };
+
+  const handleLaunchTensorboard = async () => {
+    try {
+      const result = await configApi.tensorboardLaunch();
+      if (result.ok && result.url) {
+        window.open(result.url, "_blank", "noopener");
+      } else {
+        alert(`Tensorboard launch failed: ${result.error ?? "unknown error"}`);
+      }
+    } catch (e) {
+      alert(`Tensorboard launch failed: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  };
+
+  const handleTrainingButton = () => {
+    if (isActive) {
+      stopTraining();
+    } else {
+      startTraining();
+    }
+  };
+
+  return (
+    <footer className="bottom-bar">
+      <div className="bottom-bar-left" role="status" aria-live="polite" aria-atomic="true">
+        {isActive ? (
+          <>
+            <div className="progress-glow">
+              <DualProgress
+                epochProgress={epochProgress}
+                stepProgress={stepProgress}
+                epochLabel={progress ? `Epoch ${progress.epoch}/${progress.maxEpoch}` : "Epoch"}
+                stepLabel={progress ? `Step ${progress.step}/${progress.maxStep}` : "Step"}
+              />
+            </div>
+            <span className="text-sm text-[var(--color-on-surface-secondary)] ml-2">{statusText || "Training..."}</span>
+            {status === "training" && elapsed > 0 && (
+              <span className="flex items-center gap-3 ml-3 text-xs tabular-nums text-[var(--color-on-surface-secondary)]">
+                <span className="flex items-center gap-1" title="Elapsed time">
+                  <Clock className="w-3 h-3 opacity-60" />
+                  {formatDuration(elapsed)}
+                </span>
+                {progress?.remainingTime != null && progress.remainingTime > 0 && (
+                  <span className="flex items-center gap-1" title="Estimated time remaining">
+                    <Timer className="w-3 h-3 opacity-60" />
+                    ETA {formatDuration(progress.remainingTime)}
+                  </span>
+                )}
+              </span>
+            )}
+          </>
+        ) : status === "error" ? (
+          <div className="flex items-center gap-2">
+            <span className="w-2.5 h-2.5 rounded-full bg-[var(--color-error-500)] inline-block" />
+            <span className="text-sm font-medium text-[var(--color-error-500)]">
+              {error || statusText || "Training error"}
+            </span>
+          </div>
+        ) : configError ? (
+          <div className="flex items-center gap-2">
+            <span className="w-2.5 h-2.5 rounded-full bg-[var(--color-error-500)] inline-block flex-shrink-0" />
+            <span className="text-sm text-[var(--color-error-500)] truncate max-w-[500px]" title={configError}>
+              {configError}
+            </span>
+            <button
+              onClick={clearConfigError}
+              className="text-xs text-[var(--color-on-surface-secondary)] hover:text-[var(--color-on-surface)] ml-1 flex-shrink-0"
+              aria-label="Dismiss error"
+            >
+              Dismiss
+            </button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <span className="w-2.5 h-2.5 rounded-full bg-[var(--color-success-500)] inline-block" />
+            <span className="text-sm font-medium text-[var(--color-on-surface)]">Ready to Train</span>
+            {loadedPresetName && (
+              <span className="text-xs text-[var(--color-on-surface-secondary)] ml-2">
+                {loadedPresetName.replace(/^#/, "")}
+              </span>
+            )}
+            {isDirty && <span className="text-xs text-[var(--color-cobalt-600)] ml-1">(modified)</span>}
+          </div>
+        )}
+      </div>
+
+      <div className="bottom-bar-right">
+        {isActive && (
+          <>
+            <button onClick={sampleNow} className="theme-toggle gap-1.5" aria-label="Take sample" title="Sample Now">
+              <Camera className="w-4 h-4" />
+              <span className="text-xs hidden lg:inline">Sample</span>
+            </button>
+            <button onClick={backupNow} className="theme-toggle gap-1.5" aria-label="Create backup" title="Backup Now">
+              <HardDrive className="w-4 h-4" />
+              <span className="text-xs hidden lg:inline">Backup</span>
+            </button>
+            <button onClick={saveNow} className="theme-toggle gap-1.5" aria-label="Save model" title="Save Now">
+              <Save className="w-4 h-4" />
+              <span className="text-xs hidden lg:inline">Save</span>
+            </button>
+          </>
+        )}
+
+        {latestSample && (
+          <img
+            src={latestSample}
+            alt="Latest sample"
+            className="h-8 w-8 rounded object-cover border border-[var(--color-border-subtle)]"
+            title="Latest training sample"
+          />
+        )}
+
+        <button onClick={handleExport} className="theme-toggle" aria-label="Export config" title="Export config">
+          <Download className="w-4 h-4" />
+        </button>
+        <button
+          onClick={handleLaunchTensorboard}
+          className="theme-toggle"
+          aria-label="Open Tensorboard in browser"
+          title="Open Tensorboard"
+        >
+          <BarChart3 className="w-4 h-4" />
+        </button>
+        <button
+          onClick={handleDebugPackage}
+          className="theme-toggle"
+          aria-label="Generate debug package"
+          title="Generate a zip file with config.json, system info and logs -- use this to report bugs or issues"
+        >
+          <Bug className="w-4 h-4" />
+        </button>
+        <button
+          className={`theme-toggle${terminalOpen ? " terminal-toggle-active" : ""}`}
+          onClick={toggleTerminal}
+          aria-label={terminalOpen ? "Hide terminal panel" : "Show terminal panel"}
+          aria-pressed={terminalOpen}
+          title={terminalOpen ? "Hide Terminal" : "Show Terminal"}
+        >
+          <Terminal className="w-4 h-4" />
+        </button>
+
+        {cloudEnabled && !isActive && (
+          <button
+            className="action-button"
+            onClick={() => startTraining({ reattach: true })}
+            disabled={!backendConnected}
+            aria-label="Reattach to cloud training"
+            title="Reattach to a detached cloud training run"
+          >
+            <RefreshCw className="w-4 h-4 inline mr-1" /> Reattach
+          </button>
+        )}
+
+        <button
+          className="action-button"
+          onClick={handleTrainingButton}
+          disabled={isStopping || (!isActive && !backendConnected)}
+          aria-label={isStopping ? "Stopping training" : isActive ? "Stop training" : "Start training"}
+        >
+          {isStopping ? (
+            <>
+              <Loader2 className="w-4 h-4 inline mr-1 animate-spin" /> Stopping...
+            </>
+          ) : isActive ? (
+            <>
+              <Square className="w-4 h-4 inline mr-1" /> Stop Training
+            </>
+          ) : (
+            <>
+              <Play className="w-4 h-4 inline mr-1" /> Start Training
+            </>
+          )}
+        </button>
+      </div>
+    </footer>
+  );
+}
diff --git a/web/gui/src/renderer/components/layout/TabNavigation.tsx b/web/gui/src/renderer/components/layout/TabNavigation.tsx
new file mode 100644
index 000000000..9a0a8fb2f
--- /dev/null
+++ b/web/gui/src/renderer/components/layout/TabNavigation.tsx
@@ -0,0 +1,102 @@
+import { useCallback, useMemo, useRef } from "react";
+
+import { useConfigStore } from "@/store/configStore";
+import { useUiSchemaStore } from "@/store/uiSchemaStore";
+import { type TabId, useUiStore } from "@/store/uiStore";
+import { evaluateCondition } from "@/utils/conditionEval";
+
+/** Hardcoded fallback tabs used when schema hasn't loaded yet. */
+const FALLBACK_TABS: Array<{ id: TabId; label: string }> = [
+  { id: "general", label: "General" },
+  { id: "model", label: "Model" },
+  { id: "data", label: "Data" },
+  { id: "concepts", label: "Concepts" },
+  { id: "training", label: "Training" },
+  { id: "sampling", label: "Sampling" },
+  { id: "backup", label: "Backup" },
+  { id: "tools", label: "Tools" },
+  { id: "lora", label: "LoRA" },
+  { id: "embedding", label: "Embedding" },
+  { id: "additionalembeddings", label: "Additional Embeddings" },
+  { id: "cloud", label: "Cloud" },
+  { id: "performance", label: "Performance" },
+  { id: "run", label: "Run" },
+  { id: "help", label: "Help" },
+];
+
+export default function TabNavigation() {
+  const { activeTab, setActiveTab } = useUiStore();
+  const schema = useUiSchemaStore((s) => s.schema);
+  const config = useConfigStore((s) => s.config);
+  const navRef = useRef<HTMLElement>(null);
+
+  const configRecord = useMemo(() => (config ?? {}) as Record<string, unknown>, [config]);
+  const predicates = useMemo(() => schema?.predicates ?? {}, [schema]);
+
+  const visibleTabs = useMemo(() => {
+    // Use schema tabs if available, otherwise fallback
+    const tabList = schema?.tabs
+      ? schema.tabs.map((t) => ({ id: t.id as TabId, label: t.label, visibility: t.visibility }))
+      : FALLBACK_TABS.map((t) => ({ ...t, visibility: undefined }));
+
+    return tabList.filter((t) => evaluateCondition(t.visibility, configRecord, predicates));
+  }, [schema, configRecord, predicates]);
+
+  const focusTab = useCallback(
+    (tabId: TabId) => {
+      setActiveTab(tabId);
+      const el = navRef.current?.querySelector<HTMLElement>(`#tab-${tabId}`);
+      el?.focus();
+    },
+    [setActiveTab],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLElement>) => {
+      const currentIndex = visibleTabs.findIndex((t) => t.id === activeTab);
+      if (currentIndex === -1) return;
+
+      let nextIndex: number | null = null;
+
+      switch (e.key) {
+        case "ArrowRight":
+          nextIndex = (currentIndex + 1) % visibleTabs.length;
+          break;
+        case "ArrowLeft":
+          nextIndex = (currentIndex - 1 + visibleTabs.length) % visibleTabs.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = visibleTabs.length - 1;
+          break;
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      focusTab(visibleTabs[nextIndex].id);
+    },
+    [visibleTabs, activeTab, focusTab],
+  );
+
+  return (
+    <nav className="tab-nav" role="tablist" ref={navRef} onKeyDown={handleKeyDown}>
+      {visibleTabs.map((tab) => (
+        <button
+          key={tab.id}
+          id={`tab-${tab.id}`}
+          role="tab"
+          aria-selected={activeTab === tab.id}
+          aria-controls={`tabpanel-${tab.id}`}
+          tabIndex={activeTab === tab.id ? 0 : -1}
+          className={`tab-button ${activeTab === tab.id ? "active" : ""}`}
+          onClick={() => setActiveTab(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </nav>
+  );
+}
diff --git a/web/gui/src/renderer/components/layout/TerminalPanel.tsx b/web/gui/src/renderer/components/layout/TerminalPanel.tsx
new file mode 100644
index 000000000..9cfc5403f
--- /dev/null
+++ b/web/gui/src/renderer/components/layout/TerminalPanel.tsx
@@ -0,0 +1,189 @@
+import type { FitAddon } from "@xterm/addon-fit";
+import type { Terminal } from "@xterm/xterm";
+import { ChevronDown, Eraser, Terminal as TerminalIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { useTerminalWebSocket } from "@/hooks/useTerminalWebSocket";
+import { useUiStore } from "@/store/uiStore";
+
+import { AZURE_500, COBALT_600, ON_SURFACE_DARK, SLATE_950, SURFACE_SUNKEN_DARK } from "../../../shared/brandColors";
+
+const MIN_HEIGHT = 120;
+const MAX_HEIGHT = 600;
+const DEFAULT_HEIGHT = 240;
+const STORAGE_KEY = "terminalPanelHeight";
+
+interface TerminalPanelProps {
+  isOpen: boolean;
+  backendConnected: boolean;
+}
+
+export default function TerminalPanel({ isOpen, backendConnected }: TerminalPanelProps) {
+  const setTerminalOpen = useUiStore((s) => s.setTerminalOpen);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const termRef = useRef<Terminal | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+
+  const [panelHeight, setPanelHeight] = useState(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved ? Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, parseInt(saved, 10))) : DEFAULT_HEIGHT;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, String(panelHeight));
+  }, [panelHeight]);
+
+  useEffect(() => {
+    if (!isOpen || !containerRef.current) return;
+
+    let term: Terminal | null = null;
+    let disposed = false;
+
+    async function init() {
+      const { Terminal } = await import("@xterm/xterm");
+      const { FitAddon } = await import("@xterm/addon-fit");
+      const { WebLinksAddon } = await import("@xterm/addon-web-links");
+      const { SearchAddon } = await import("@xterm/addon-search");
+      await import("@xterm/xterm/css/xterm.css");
+
+      if (disposed || !containerRef.current) return;
+
+      term = new Terminal({
+        theme: {
+          background: SURFACE_SUNKEN_DARK,
+          foreground: "#D4DCE8",
+          cursor: COBALT_600,
+          selectionBackground: `${AZURE_500}4D`, // 30% opacity
+          black: SLATE_950,
+          red: "#FF6B6B",
+          green: "#4ADE80",
+          yellow: "#FACC15",
+          blue: "#60A5FA",
+          magenta: COBALT_600,
+          cyan: "#22D3EE",
+          white: ON_SURFACE_DARK,
+          brightBlack: "#4B5563",
+          brightRed: "#FCA5A5",
+          brightGreen: "#86EFAC",
+          brightYellow: "#FDE68A",
+          brightBlue: "#93C5FD",
+          brightMagenta: "#60A5FA",
+          brightCyan: "#67E8F9",
+          brightWhite: "#FFFFFF",
+        },
+        fontFamily: '"JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace',
+        fontSize: 12,
+        lineHeight: 1.4,
+        scrollback: 5000,
+        convertEol: true,
+        cursorBlink: false,
+        disableStdin: true,
+        allowTransparency: true,
+      });
+
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+      term.loadAddon(new WebLinksAddon());
+      term.loadAddon(new SearchAddon());
+      term.open(containerRef.current);
+
+      requestAnimationFrame(() => {
+        if (!disposed) {
+          fitAddon.fit();
+        }
+      });
+
+      termRef.current = term;
+      fitAddonRef.current = fitAddon;
+    }
+
+    init();
+
+    return () => {
+      disposed = true;
+      if (term) {
+        term.dispose();
+      }
+      termRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen || !containerRef.current) return;
+
+    const ro = new ResizeObserver(() => {
+      fitAddonRef.current?.fit();
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [isOpen]);
+
+  const onData = useCallback((text: string) => {
+    termRef.current?.write(text);
+  }, []);
+
+  useTerminalWebSocket(onData, isOpen && backendConnected);
+
+  const panelHeightRef = useRef(panelHeight);
+  panelHeightRef.current = panelHeight;
+
+  const dragStartY = useRef(0);
+  const dragStartH = useRef(0);
+
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragStartY.current = e.clientY;
+    dragStartH.current = panelHeightRef.current;
+
+    const onMouseMove = (e: MouseEvent) => {
+      const delta = dragStartY.current - e.clientY;
+      const newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, dragStartH.current + delta));
+      setPanelHeight(newHeight);
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }, []);
+
+  const clearTerminal = useCallback(() => {
+    termRef.current?.clear();
+  }, []);
+
+  return (
+    <div
+      className="terminal-panel"
+      style={{ height: panelHeight }}
+      role="log"
+      aria-label="Backend log output"
+      aria-live="off"
+    >
+      <div className="terminal-panel-resize-handle" onMouseDown={handleResizeStart} aria-hidden="true" />
+      <div className="terminal-panel-header">
+        <span className="terminal-panel-title">
+          <TerminalIcon className="w-3.5 h-3.5" />
+          Backend Log
+        </span>
+        <div className="terminal-panel-actions">
+          <button onClick={clearTerminal} className="theme-toggle" aria-label="Clear terminal" title="Clear">
+            <Eraser className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={() => setTerminalOpen(false)}
+            className="theme-toggle"
+            aria-label="Close terminal panel"
+            title="Close"
+          >
+            <ChevronDown className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+      <div ref={containerRef} className="terminal-panel-xterm" />
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/layout/TopBar.tsx b/web/gui/src/renderer/components/layout/TopBar.tsx
new file mode 100644
index 000000000..d18463418
--- /dev/null
+++ b/web/gui/src/renderer/components/layout/TopBar.tsx
@@ -0,0 +1,224 @@
+import { Moon, Save, Sun, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { configApi, type PresetInfo } from "@/api/configApi";
+import { SavePresetModal } from "@/components/modals/SavePresetModal";
+import { useConfigField } from "@/hooks/useConfigField";
+import { useConfigStore } from "@/store/configStore";
+import { useUiStore } from "@/store/uiStore";
+import type { ModelType, TrainingMethod } from "@/types/generated/enums";
+import { ModelTypeValues } from "@/types/generated/enums";
+import { TRAINING_METHODS_BY_MODEL } from "@/types/generated/modelTypeInfo";
+import { enumLabel } from "@/utils/enumLabels";
+
+export default function TopBar() {
+  const { theme, toggleTheme, backendConnected } = useUiStore();
+  const loadPreset = useConfigStore((s) => s.loadPreset);
+  const savePreset = useConfigStore((s) => s.savePreset);
+  const loadedPresetName = useConfigStore((s) => s.loadedPresetName);
+  const [modelType, setModelType] = useConfigField<ModelType>("model_type");
+  const [trainingMethod, setTrainingMethod] = useConfigField<TrainingMethod>("training_method");
+  const [presets, setPresets] = useState<PresetInfo[]>([]);
+  const [showSaveModal, setShowSaveModal] = useState(false);
+
+  useEffect(() => {
+    if (backendConnected) {
+      configApi
+        .listPresets()
+        .then(setPresets)
+        .catch((err) => {
+          console.error("[TopBar] Failed to fetch presets:", err);
+        });
+    }
+  }, [backendConnected]);
+
+  const availableMethods = TRAINING_METHODS_BY_MODEL[modelType ?? "STABLE_DIFFUSION_15"];
+
+  const handlePresetLoad = (path: string) => {
+    const preset = presets.find((p) => p.path === path);
+    loadPreset(path, preset?.name);
+  };
+  const handleSavePreset = () => {
+    setShowSaveModal(true);
+  };
+  const handleSavePresetConfirm = async (name: string) => {
+    await savePreset(name);
+    setShowSaveModal(false);
+    try {
+      const updated = await configApi.listPresets();
+      setPresets(updated);
+    } catch {
+      /* best-effort refresh */
+    }
+  };
+  const handleModelChange = (val: string) => {
+    setModelType(val as ModelType);
+    // If current training method is not compatible with new model, reset to FINE_TUNE
+    const methods = TRAINING_METHODS_BY_MODEL[val as ModelType];
+    if (trainingMethod && !methods.includes(trainingMethod)) {
+      setTrainingMethod("FINE_TUNE");
+    }
+  };
+
+  const [presetMenuOpen, setPresetMenuOpen] = useState(false);
+  const presetMenuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!presetMenuOpen) return;
+    const onClick = (e: MouseEvent) => {
+      if (presetMenuRef.current && !presetMenuRef.current.contains(e.target as Node)) {
+        setPresetMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [presetMenuOpen]);
+
+  const handleDeletePreset = async (name: string) => {
+    if (!confirm(`Delete preset "${name}"? This cannot be undone.`)) return;
+    try {
+      await configApi.deletePreset(name);
+      const updated = await configApi.listPresets();
+      setPresets(updated);
+    } catch (err) {
+      alert(`Failed to delete preset: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  };
+
+  return (
+    <header className="top-bar">
+      <div className="top-bar-left">
+        <h1 className="top-bar-title">OneTrainer</h1>
+        {new URLSearchParams(window.location.search).get("dev") === "1" && (
+          <span className={`connection-status ${backendConnected ? "connected" : "disconnected"}`}>
+            {backendConnected ? "Connected" : "Disconnected"}
+          </span>
+        )}
+      </div>
+      <div className="top-bar-right">
+        <div ref={presetMenuRef} className="relative">
+          <button
+            type="button"
+            className="top-bar-select cursor-pointer text-left"
+            onClick={() => setPresetMenuOpen((v) => !v)}
+            aria-haspopup="menu"
+            aria-expanded={presetMenuOpen}
+          >
+            {loadedPresetName ? `Preset: ${loadedPresetName.replace(/^#/, "")}` : "Load Preset..."}
+          </button>
+          {presetMenuOpen && (
+            <div
+              role="menu"
+              className="absolute z-50 right-0 mt-1 min-w-[220px] max-h-80 overflow-y-auto rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] shadow-lg"
+            >
+              {presets.filter((p) => p.is_builtin).length > 0 && (
+                <div>
+                  <div className="px-3 py-1 text-xs uppercase tracking-wide text-[var(--color-on-surface-secondary)]">
+                    Built-in
+                  </div>
+                  {presets
+                    .filter((p) => p.is_builtin)
+                    .map((p) => (
+                      <button
+                        key={p.path}
+                        type="button"
+                        className="block w-full px-3 py-1.5 text-left text-sm text-[var(--color-on-surface)] hover:bg-[var(--color-border-subtle)]"
+                        onClick={() => {
+                          handlePresetLoad(p.path);
+                          setPresetMenuOpen(false);
+                        }}
+                      >
+                        {p.name}
+                      </button>
+                    ))}
+                </div>
+              )}
+              {presets.filter((p) => !p.is_builtin).length > 0 && (
+                <div>
+                  <div className="px-3 py-1 text-xs uppercase tracking-wide text-[var(--color-on-surface-secondary)] mt-1">
+                    User
+                  </div>
+                  {presets
+                    .filter((p) => !p.is_builtin)
+                    .map((p) => (
+                      <div
+                        key={p.path}
+                        className="flex items-center justify-between px-3 py-1.5 text-sm text-[var(--color-on-surface)] hover:bg-[var(--color-border-subtle)]"
+                      >
+                        <button
+                          type="button"
+                          onClick={() => {
+                            handlePresetLoad(p.path);
+                            setPresetMenuOpen(false);
+                          }}
+                          className="text-left flex-1 truncate"
+                        >
+                          {p.name}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleDeletePreset(p.name)}
+                          className="ml-2 p-1 rounded hover:bg-[rgba(239,68,68,0.15)] text-[var(--color-error-500)]"
+                          aria-label={`Delete preset ${p.name}`}
+                          title={`Delete preset "${p.name}"`}
+                        >
+                          <X className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    ))}
+                </div>
+              )}
+              {presets.length === 0 && (
+                <div className="px-3 py-2 text-sm text-[var(--color-on-surface-secondary)]">No presets available</div>
+              )}
+            </div>
+          )}
+        </div>
+        <button onClick={handleSavePreset} className="theme-toggle" aria-label="Save preset" title="Save preset">
+          <Save className="w-4 h-4" />
+        </button>
+
+        <div className="top-bar-separator" aria-hidden="true" />
+
+        <select
+          value={modelType ?? "STABLE_DIFFUSION_15"}
+          onChange={(e) => handleModelChange(e.target.value)}
+          className="top-bar-select"
+        >
+          {ModelTypeValues.map((mt) => (
+            <option key={mt} value={mt}>
+              {enumLabel(mt)}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={trainingMethod ?? "FINE_TUNE"}
+          onChange={(e) => setTrainingMethod(e.target.value as TrainingMethod)}
+          className="top-bar-select"
+        >
+          {availableMethods.map((m) => (
+            <option key={m} value={m}>
+              {enumLabel(m)}
+            </option>
+          ))}
+        </select>
+
+        <div className="top-bar-separator" aria-hidden="true" />
+
+        <button
+          onClick={toggleTheme}
+          className="theme-toggle"
+          aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+        >
+          {theme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+        </button>
+      </div>
+      <SavePresetModal
+        isOpen={showSaveModal}
+        onClose={() => setShowSaveModal(false)}
+        onSave={handleSavePresetConfirm}
+      />
+    </header>
+  );
+}
diff --git a/web/gui/src/renderer/components/mask-editor/MaskEditorCanvas.tsx b/web/gui/src/renderer/components/mask-editor/MaskEditorCanvas.tsx
new file mode 100644
index 000000000..5d0649c9b
--- /dev/null
+++ b/web/gui/src/renderer/components/mask-editor/MaskEditorCanvas.tsx
@@ -0,0 +1,405 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+
+import { toolsApi, type YoloDetection } from "@/api/toolsApi";
+import type { MaskTool } from "@/hooks/useMaskEditor";
+
+export interface MaskEditorCanvasHandle {
+  acceptDetection: (detection: YoloDetection) => void;
+}
+
+interface MaskEditorCanvasProps {
+  imagePath: string | null;
+  tool: MaskTool;
+  brushSize: number;
+  zoom: number;
+  panOffset: { x: number; y: number };
+  onZoomChange: (zoom: number) => void;
+  onPanChange: (offset: { x: number; y: number }) => void;
+  maskCanvasRef: RefObject<HTMLCanvasElement | null>;
+  onBeforeStroke: () => void;
+  yoloDetections: YoloDetection[];
+  hoveredDetection: number | null;
+  onReady?: (handle: MaskEditorCanvasHandle) => void;
+}
+
+export function MaskEditorCanvas({
+  imagePath,
+  tool,
+  brushSize,
+  zoom,
+  panOffset,
+  onZoomChange,
+  onPanChange,
+  maskCanvasRef,
+  onBeforeStroke,
+  yoloDetections,
+  hoveredDetection,
+  onReady,
+}: MaskEditorCanvasProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imgCanvasRef = useRef<HTMLCanvasElement>(null);
+  const cursorCanvasRef = useRef<HTMLCanvasElement>(null);
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const [canvasSize, setCanvasSize] = useState({ width: 800, height: 600 });
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+
+  const isDrawingRef = useRef(false);
+  const isPanningRef = useRef(false);
+  const lastPointRef = useRef<{ x: number; y: number } | null>(null);
+  const panStartRef = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);
+  const polygonPointsRef = useRef<Array<{ x: number; y: number }>>([]);
+
+  const getTransform = useCallback(() => {
+    if (imageSize.width === 0 || imageSize.height === 0) return { scale: 1, ox: 0, oy: 0 };
+    const baseScale = Math.min(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+    const scale = baseScale * zoom;
+    const ox = (canvasSize.width - imageSize.width * scale) / 2 + panOffset.x;
+    const oy = (canvasSize.height - imageSize.height * scale) / 2 + panOffset.y;
+    return { scale, ox, oy };
+  }, [canvasSize, imageSize, zoom, panOffset]);
+
+  const screenToImage = useCallback(
+    (sx: number, sy: number) => {
+      const { scale, ox, oy } = getTransform();
+      return { x: (sx - ox) / scale, y: (sy - oy) / scale };
+    },
+    [getTransform],
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const obs = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      setCanvasSize({ width: Math.floor(width), height: Math.floor(height) });
+    });
+    obs.observe(container);
+    return () => obs.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!imagePath) return;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      imageRef.current = img;
+      setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
+
+      const maskCanvas = maskCanvasRef.current;
+      if (maskCanvas) {
+        maskCanvas.width = img.naturalWidth;
+        maskCanvas.height = img.naturalHeight;
+        const ctx = maskCanvas.getContext("2d");
+        if (ctx) ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+      }
+
+      const maskUrl = toolsApi.getMaskEditorImageUrl(imagePath.replace(/(\.[^.]+)$/, "-masklabel.png"));
+      const maskImg = new Image();
+      maskImg.crossOrigin = "anonymous";
+      maskImg.onload = () => {
+        if (maskCanvas) {
+          const ctx = maskCanvas.getContext("2d");
+          if (ctx) {
+            ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+            ctx.drawImage(maskImg, 0, 0, maskCanvas.width, maskCanvas.height);
+          }
+        }
+      };
+      maskImg.onerror = () => {
+        /* no existing mask, canvas stays clear */
+      };
+      maskImg.src = maskUrl;
+    };
+    img.src = toolsApi.getMaskEditorImageUrl(imagePath);
+  }, [imagePath, maskCanvasRef]);
+
+  const renderImage = useCallback(() => {
+    const canvas = imgCanvasRef.current;
+    const img = imageRef.current;
+    if (!canvas || !img) return;
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const { scale, ox, oy } = getTransform();
+    ctx.drawImage(img, ox, oy, imageSize.width * scale, imageSize.height * scale);
+
+    const maskCanvas = maskCanvasRef.current;
+    if (maskCanvas) {
+      ctx.globalAlpha = 0.4;
+      ctx.drawImage(maskCanvas, ox, oy, imageSize.width * scale, imageSize.height * scale);
+      ctx.globalAlpha = 1.0;
+    }
+  }, [canvasSize, imageSize, getTransform, maskCanvasRef]);
+
+  const renderCursor = useCallback(
+    (mouseX?: number, mouseY?: number) => {
+      const canvas = cursorCanvasRef.current;
+      if (!canvas) return;
+      canvas.width = canvasSize.width;
+      canvas.height = canvasSize.height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const { scale, ox, oy } = getTransform();
+
+      if ((tool === "brush" || tool === "eraser") && mouseX !== undefined && mouseY !== undefined) {
+        ctx.beginPath();
+        ctx.arc(mouseX, mouseY, (brushSize / 2) * scale, 0, Math.PI * 2);
+        ctx.strokeStyle = tool === "brush" ? "rgba(255,255,255,0.8)" : "rgba(255,0,0,0.8)";
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      }
+
+      if (tool === "polygon" && polygonPointsRef.current.length > 0) {
+        ctx.beginPath();
+        const pts = polygonPointsRef.current;
+        for (let i = 0; i < pts.length; i++) {
+          const sx = pts[i].x * scale + ox;
+          const sy = pts[i].y * scale + oy;
+          if (i === 0) ctx.moveTo(sx, sy);
+          else ctx.lineTo(sx, sy);
+        }
+        if (mouseX !== undefined && mouseY !== undefined) {
+          ctx.lineTo(mouseX, mouseY);
+        }
+        ctx.strokeStyle = "rgba(255,255,0,0.8)";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        for (const pt of pts) {
+          ctx.beginPath();
+          ctx.arc(pt.x * scale + ox, pt.y * scale + oy, 4, 0, Math.PI * 2);
+          ctx.fillStyle = "rgba(255,255,0,1)";
+          ctx.fill();
+        }
+      }
+
+      if (hoveredDetection !== null && hoveredDetection < yoloDetections.length) {
+        const det = yoloDetections[hoveredDetection];
+        if (det.polygon.length > 0) {
+          ctx.beginPath();
+          for (let i = 0; i < det.polygon.length; i++) {
+            const px = det.polygon[i][0] * imageSize.width * scale + ox;
+            const py = det.polygon[i][1] * imageSize.height * scale + oy;
+            if (i === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+          }
+          ctx.closePath();
+          ctx.fillStyle = "rgba(37, 99, 235, 0.3)";
+          ctx.fill();
+          ctx.strokeStyle = "rgba(37, 99, 235, 0.8)";
+          ctx.lineWidth = 2;
+          ctx.stroke();
+        }
+      }
+    },
+    [canvasSize, getTransform, tool, brushSize, yoloDetections, hoveredDetection, imageSize],
+  );
+
+  useEffect(() => {
+    renderImage();
+    renderCursor();
+  }, [renderImage, renderCursor]);
+
+  const paintAt = useCallback(
+    (imgX: number, imgY: number, erase: boolean) => {
+      const maskCanvas = maskCanvasRef.current;
+      if (!maskCanvas) return;
+      const ctx = maskCanvas.getContext("2d");
+      if (!ctx) return;
+
+      if (erase) {
+        ctx.globalCompositeOperation = "destination-out";
+      } else {
+        ctx.globalCompositeOperation = "source-over";
+      }
+
+      ctx.beginPath();
+      ctx.arc(imgX, imgY, brushSize / 2, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(255, 255, 255, 1)";
+      ctx.fill();
+      ctx.globalCompositeOperation = "source-over";
+    },
+    [brushSize, maskCanvasRef],
+  );
+
+  const interpolateStroke = useCallback(
+    (from: { x: number; y: number }, to: { x: number; y: number }, erase: boolean) => {
+      const dx = to.x - from.x;
+      const dy = to.y - from.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const steps = Math.max(1, Math.ceil(dist / (brushSize / 4)));
+      for (let i = 0; i <= steps; i++) {
+        const t = i / steps;
+        paintAt(from.x + dx * t, from.y + dy * t, erase);
+      }
+    },
+    [brushSize, paintAt],
+  );
+
+  const getCanvasCoords = (e: React.MouseEvent) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    const { x, y } = getCanvasCoords(e);
+
+    if (e.altKey || e.button === 1) {
+      isPanningRef.current = true;
+      panStartRef.current = { x, y, ox: panOffset.x, oy: panOffset.y };
+      return;
+    }
+
+    if (e.button !== 0) return;
+
+    if (tool === "brush" || tool === "eraser") {
+      onBeforeStroke();
+      isDrawingRef.current = true;
+      const imgPt = screenToImage(x, y);
+      lastPointRef.current = imgPt;
+      paintAt(imgPt.x, imgPt.y, tool === "eraser");
+      renderImage();
+    } else if (tool === "polygon") {
+      const imgPt = screenToImage(x, y);
+      polygonPointsRef.current.push(imgPt);
+      renderCursor(x, y);
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const { x, y } = getCanvasCoords(e);
+
+    if (isPanningRef.current && panStartRef.current) {
+      const dx = x - panStartRef.current.x;
+      const dy = y - panStartRef.current.y;
+      onPanChange({ x: panStartRef.current.ox + dx, y: panStartRef.current.oy + dy });
+      return;
+    }
+
+    if (isDrawingRef.current && (tool === "brush" || tool === "eraser")) {
+      const imgPt = screenToImage(x, y);
+      if (lastPointRef.current) {
+        interpolateStroke(lastPointRef.current, imgPt, tool === "eraser");
+      }
+      lastPointRef.current = imgPt;
+      renderImage();
+    }
+
+    renderCursor(x, y);
+  };
+
+  const handleMouseUp = () => {
+    isDrawingRef.current = false;
+    isPanningRef.current = false;
+    lastPointRef.current = null;
+    panStartRef.current = null;
+  };
+
+  const handleWheel = (e: React.WheelEvent) => {
+    if (!e.ctrlKey) return;
+    e.preventDefault();
+    const factor = e.deltaY < 0 ? 1.1 : 0.9;
+    const newZoom = Math.max(0.1, Math.min(10, zoom * factor));
+    onZoomChange(newZoom);
+  };
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (tool === "polygon" && e.key === "Enter" && polygonPointsRef.current.length >= 3) {
+        onBeforeStroke();
+        const maskCanvas = maskCanvasRef.current;
+        if (maskCanvas) {
+          const ctx = maskCanvas.getContext("2d");
+          if (ctx) {
+            ctx.beginPath();
+            const pts = polygonPointsRef.current;
+            ctx.moveTo(pts[0].x, pts[0].y);
+            for (let i = 1; i < pts.length; i++) {
+              ctx.lineTo(pts[i].x, pts[i].y);
+            }
+            ctx.closePath();
+            ctx.fillStyle = "rgba(255, 255, 255, 1)";
+            ctx.fill();
+          }
+        }
+        polygonPointsRef.current = [];
+        renderImage();
+        renderCursor();
+      }
+      if (e.key === "Escape") {
+        polygonPointsRef.current = [];
+        renderCursor();
+      }
+    },
+    [tool, onBeforeStroke, maskCanvasRef, renderImage, renderCursor],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  const acceptDetection = useCallback(
+    (detection: YoloDetection) => {
+      const maskCanvas = maskCanvasRef.current;
+      if (!maskCanvas || detection.polygon.length === 0) return;
+      onBeforeStroke();
+      const ctx = maskCanvas.getContext("2d");
+      if (!ctx) return;
+      ctx.beginPath();
+      for (let i = 0; i < detection.polygon.length; i++) {
+        const px = detection.polygon[i][0] * imageSize.width;
+        const py = detection.polygon[i][1] * imageSize.height;
+        if (i === 0) ctx.moveTo(px, py);
+        else ctx.lineTo(px, py);
+      }
+      ctx.closePath();
+      ctx.fillStyle = "rgba(255, 255, 255, 1)";
+      ctx.fill();
+      renderImage();
+    },
+    [maskCanvasRef, imageSize, onBeforeStroke, renderImage],
+  );
+
+  useEffect(() => {
+    if (onReady) onReady({ acceptDetection });
+  }, [onReady, acceptDetection]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative flex-1 overflow-hidden bg-[var(--color-surface-dark)] cursor-crosshair"
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onWheel={handleWheel}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        if (tool === "polygon" && polygonPointsRef.current.length > 0) {
+          polygonPointsRef.current.pop();
+          renderCursor();
+        }
+      }}
+    >
+      <canvas ref={imgCanvasRef} width={canvasSize.width} height={canvasSize.height} className="absolute inset-0" />
+      <canvas ref={maskCanvasRef} className="hidden" />
+      <canvas
+        ref={cursorCanvasRef}
+        width={canvasSize.width}
+        height={canvasSize.height}
+        className="absolute inset-0 pointer-events-none"
+      />
+      {!imagePath && (
+        <div className="absolute inset-0 flex items-center justify-center text-[var(--color-on-surface-secondary)]">
+          Select an image to begin editing
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/CaptionToolModal.tsx b/web/gui/src/renderer/components/modals/CaptionToolModal.tsx
new file mode 100644
index 000000000..efb34b4fb
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/CaptionToolModal.tsx
@@ -0,0 +1,521 @@
+import { Eye, Loader2, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { type ApiCaptionRequest, type PreviewResponse, toolsApi } from "@/api/toolsApi";
+import { Button, DirPicker, FormEntry, ProgressBar, Select, SliderEntry, Toggle, Tooltip } from "@/components/shared";
+import { useToolPolling } from "@/hooks/useToolPolling";
+import { CAPTION_MODELS, CAPTION_MODES } from "@/types/generated/dropdownSources";
+import { INPUT_FLEX, TEXTAREA_FULL } from "@/utils/inputStyles";
+
+import { ModalBase } from "./ModalBase";
+
+export interface CaptionToolModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const LOCAL_MODELS = new Set(["Blip", "Blip2", "WD14 VIT v2"]);
+const API_MODELS = new Set(["OpenAI Compatible", "Gemini API"]);
+
+interface CaptionState {
+  model: string;
+  folder: string;
+  initial_caption: string;
+  caption_prefix: string;
+  caption_postfix: string;
+  mode: string;
+  include_subdirectories: boolean;
+  // API fields
+  api_url: string;
+  api_key: string;
+  model_name: string;
+  system_prompt: string;
+  temperature: number;
+  max_tokens: number;
+  enable_thinking: boolean;
+  batch_size: number;
+  requests_per_minute: number;
+  // Prompt
+  prompt: string;
+  additional_prompts: string[];
+  pass_filename: boolean;
+  pass_metadata: boolean;
+  pass_current_caption: boolean;
+}
+
+const DEFAULT_STATE: CaptionState = {
+  model: "Blip",
+  folder: "",
+  initial_caption: "",
+  caption_prefix: "",
+  caption_postfix: "",
+  mode: "fill",
+  include_subdirectories: false,
+  api_url: "http://localhost:1234/v1/chat/completions",
+  api_key: "",
+  model_name: "",
+  system_prompt: "",
+  temperature: 0.6,
+  max_tokens: -1,
+  enable_thinking: false,
+  batch_size: 1,
+  requests_per_minute: 0,
+  prompt: "",
+  additional_prompts: [],
+  pass_filename: false,
+  pass_metadata: false,
+  pass_current_caption: false,
+};
+
+function isLocalModel(model: string): boolean {
+  return LOCAL_MODELS.has(model);
+}
+
+function isApiModel(model: string): boolean {
+  return API_MODELS.has(model);
+}
+
+export function CaptionToolModal({ open, onClose }: CaptionToolModalProps) {
+  const [state, setState] = useState<CaptionState>({ ...DEFAULT_STATE });
+  const polling = useToolPolling();
+  const { status, isRunning, error } = polling;
+  const [preview, setPreview] = useState<PreviewResponse | null>(null);
+  const [isPreviewing, setIsPreviewing] = useState(false);
+  const [showApiKey, setShowApiKey] = useState(false);
+
+  const update = useCallback(<K extends keyof CaptionState>(field: K, value: CaptionState[K]) => {
+    setState((prev) => ({ ...prev, [field]: value }));
+  }, []);
+
+  useEffect(() => {
+    if (!open || !isApiModel(state.model)) return;
+    toolsApi
+      .getCaptionKeys()
+      .then((keys) => {
+        setState((prev) => ({
+          ...prev,
+          api_key: prev.api_key || keys.openai_api_key || keys.gemini_api_key || "",
+          api_url: prev.api_url || keys.openai_api_url || "http://localhost:1234/v1/chat/completions",
+        }));
+      })
+      .catch(() => {
+        /* ignore */
+      });
+  }, [open, state.model]);
+
+  const handleGenerate = async () => {
+    if (!state.folder) {
+      polling.setError("Please select a folder.");
+      return;
+    }
+    polling.start();
+
+    try {
+      let result;
+      if (isApiModel(state.model)) {
+        const params: ApiCaptionRequest = {
+          backend: state.model === "OpenAI Compatible" ? "openai" : "gemini",
+          folder: state.folder,
+          prompt: state.prompt || "Describe this image.",
+          additional_prompts: state.additional_prompts.filter((p) => p.trim()),
+          mode: state.mode,
+          include_subdirectories: state.include_subdirectories,
+          caption_prefix: state.caption_prefix,
+          caption_postfix: state.caption_postfix,
+          api_url: state.api_url,
+          api_key: state.api_key,
+          model_name: state.model_name,
+          system_prompt: state.system_prompt,
+          temperature: state.temperature,
+          max_tokens: state.max_tokens,
+          enable_thinking: state.enable_thinking,
+          batch_size: state.batch_size,
+          requests_per_minute: state.requests_per_minute,
+          pass_filename: state.pass_filename,
+          pass_metadata: state.pass_metadata,
+          pass_current_caption: state.pass_current_caption,
+        };
+        result = await toolsApi.generateCaptionsApi(params);
+      } else {
+        result = await toolsApi.generateCaptions({
+          model: state.model,
+          folder: state.folder,
+          initial_caption: state.initial_caption,
+          caption_prefix: state.caption_prefix,
+          caption_postfix: state.caption_postfix,
+          mode: state.mode,
+          include_subdirectories: state.include_subdirectories,
+        });
+      }
+      if (!result.ok) {
+        polling.setError(result.error ?? "Failed to start");
+        polling.stop();
+      }
+    } catch (err) {
+      polling.setError(err instanceof Error ? err.message : "Unknown error");
+      polling.stop();
+    }
+  };
+
+  const handlePreview = async () => {
+    if (!state.folder) {
+      polling.setError("Please select a folder.");
+      return;
+    }
+    polling.setError(null);
+    setIsPreviewing(true);
+    setPreview(null);
+    try {
+      const result = await toolsApi.previewCaption({
+        backend: isApiModel(state.model) ? (state.model === "OpenAI Compatible" ? "openai" : "gemini") : "",
+        model: isLocalModel(state.model) ? state.model : "",
+        folder: state.folder,
+        prompt: state.prompt || "Describe this image.",
+        include_subdirectories: state.include_subdirectories,
+        api_url: state.api_url,
+        api_key: state.api_key,
+        model_name: state.model_name,
+        system_prompt: state.system_prompt,
+        temperature: state.temperature,
+        max_tokens: state.max_tokens,
+        enable_thinking: state.enable_thinking,
+        pass_filename: state.pass_filename,
+        pass_metadata: state.pass_metadata,
+        pass_current_caption: state.pass_current_caption,
+      });
+      setPreview(result);
+      if (!result.ok && result.error) polling.setError(result.error);
+    } catch (err) {
+      polling.setError(err instanceof Error ? err.message : "Preview failed");
+    } finally {
+      setIsPreviewing(false);
+    }
+  };
+
+  const handleCancel = async () => {
+    try {
+      await toolsApi.cancel();
+      polling.stop();
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const addPrompt = () => {
+    setState((prev) => ({ ...prev, additional_prompts: [...prev.additional_prompts, ""] }));
+  };
+
+  const removePrompt = (index: number) => {
+    setState((prev) => ({
+      ...prev,
+      additional_prompts: prev.additional_prompts.filter((_, i) => i !== index),
+    }));
+  };
+
+  const updatePrompt = (index: number, value: string) => {
+    setState((prev) => ({
+      ...prev,
+      additional_prompts: prev.additional_prompts.map((p, i) => (i === index ? value : p)),
+    }));
+  };
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Batch Generate Captions" size="lg" closeOnBackdrop={!isRunning}>
+      <div className="flex flex-col gap-4 max-h-[70vh] overflow-y-auto pr-1">
+        <Select
+          label="Model"
+          options={CAPTION_MODELS}
+          value={state.model}
+          onChange={(v) => update("model", v)}
+          disabled={isRunning}
+        />
+
+        <DirPicker label="Folder" value={state.folder} onChange={(v) => update("folder", v)} disabled={isRunning} />
+
+        {isLocalModel(state.model) && (
+          <>
+            <FormEntry
+              label="Initial Caption"
+              value={state.initial_caption}
+              onChange={(v) => update("initial_caption", String(v))}
+              placeholder="Optional initial caption..."
+              disabled={isRunning}
+            />
+            <FormEntry
+              label="Caption Prefix"
+              value={state.caption_prefix}
+              onChange={(v) => update("caption_prefix", String(v))}
+              placeholder="Optional prefix..."
+              disabled={isRunning}
+            />
+            <FormEntry
+              label="Caption Postfix"
+              value={state.caption_postfix}
+              onChange={(v) => update("caption_postfix", String(v))}
+              placeholder="Optional postfix..."
+              disabled={isRunning}
+            />
+          </>
+        )}
+
+        {isApiModel(state.model) && (
+          <div className="flex flex-col gap-3 p-3 rounded-[var(--radius-sm)] bg-[var(--color-surface-elevated)] border border-[var(--color-border-subtle)]">
+            <h4 className="text-sm font-semibold text-[var(--color-on-surface-secondary)]">
+              {state.model === "OpenAI Compatible" ? "OpenAI" : "Gemini"} API Settings
+            </h4>
+            {state.model === "OpenAI Compatible" && (
+              <FormEntry
+                label="API URL"
+                value={state.api_url}
+                onChange={(v) => update("api_url", String(v))}
+                placeholder="http://localhost:1234/v1/chat/completions"
+                disabled={isRunning}
+              />
+            )}
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-medium text-[var(--color-on-surface)]">API Key</label>
+              <div className="flex gap-1">
+                <input
+                  type={showApiKey ? "text" : "password"}
+                  value={state.api_key}
+                  onChange={(e) => update("api_key", e.target.value)}
+                  disabled={isRunning}
+                  placeholder={state.model === "OpenAI Compatible" ? "sk-..." : "AIzaSy..."}
+                  className="flex-1 px-3 py-1.5 rounded-[var(--radius-sm)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] text-sm text-[var(--color-on-surface)]"
+                />
+                <Button variant="secondary" onClick={() => setShowApiKey(!showApiKey)} disabled={isRunning}>
+                  {showApiKey ? "Hide" : "Show"}
+                </Button>
+              </div>
+            </div>
+            <FormEntry
+              label="Model Name"
+              value={state.model_name}
+              onChange={(v) => update("model_name", String(v))}
+              placeholder={state.model === "OpenAI Compatible" ? "local-model" : "gemini-1.5-flash"}
+              disabled={isRunning}
+            />
+            <FormEntry
+              label="System Prompt"
+              value={state.system_prompt}
+              onChange={(v) => update("system_prompt", String(v))}
+              placeholder="Optional system prompt..."
+              disabled={isRunning}
+            />
+            <div className="grid grid-cols-2 gap-3">
+              <SliderEntry
+                label="Temperature"
+                value={state.temperature}
+                onChange={(v) => update("temperature", v)}
+                min={0}
+                max={2}
+                step={0.1}
+                disabled={isRunning}
+              />
+              <FormEntry
+                label="Max Tokens"
+                value={state.max_tokens}
+                onChange={(v) => update("max_tokens", Number(v))}
+                type="number"
+                placeholder="-1 = unlimited"
+                disabled={isRunning}
+              />
+              {state.model === "OpenAI Compatible" && (
+                <>
+                  <FormEntry
+                    label="Batch Size"
+                    value={state.batch_size}
+                    onChange={(v) => update("batch_size", Number(v))}
+                    type="number"
+                    tooltip="Number of concurrent API requests"
+                    disabled={isRunning}
+                  />
+                  <FormEntry
+                    label="RPM Limit"
+                    value={state.requests_per_minute}
+                    onChange={(v) => update("requests_per_minute", Number(v))}
+                    type="number"
+                    tooltip="Requests per minute (0 = unlimited)"
+                    disabled={isRunning}
+                  />
+                </>
+              )}
+            </div>
+            {state.model === "OpenAI Compatible" && (
+              <Toggle
+                label="Enable thinking mode"
+                value={state.enable_thinking}
+                onChange={(v) => update("enable_thinking", v)}
+                disabled={isRunning}
+              />
+            )}
+          </div>
+        )}
+
+        {isApiModel(state.model) && (
+          <div className="flex flex-col gap-3 p-3 rounded-[var(--radius-sm)] bg-[var(--color-surface-elevated)] border border-[var(--color-border-subtle)]">
+            <h4 className="text-sm font-semibold text-[var(--color-on-surface-secondary)]">Prompt</h4>
+            <textarea
+              value={state.prompt}
+              onChange={(e) => update("prompt", e.target.value)}
+              disabled={isRunning}
+              placeholder="Describe this image."
+              rows={3}
+              className={`${TEXTAREA_FULL} resize-y`}
+            />
+
+            {state.additional_prompts.map((p, i) => (
+              <div key={i} className="flex gap-1">
+                <input
+                  type="text"
+                  value={p}
+                  onChange={(e) => updatePrompt(i, e.target.value)}
+                  disabled={isRunning}
+                  placeholder={`Additional prompt ${i + 1}...`}
+                  className={INPUT_FLEX}
+                />
+                <button
+                  type="button"
+                  onClick={() => removePrompt(i)}
+                  disabled={isRunning}
+                  className="p-1.5 rounded-[var(--radius-sm)] text-[var(--color-error-500)] hover:bg-[var(--color-error-500)]/10"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
+
+            <Tooltip content="A prompt will be randomly selected from the pool for each image">
+              <Button variant="secondary" onClick={addPrompt} disabled={isRunning}>
+                <Plus className="w-4 h-4 mr-1" /> Add Additional Prompt
+              </Button>
+            </Tooltip>
+
+            <div className="flex flex-col gap-2 pt-2 border-t border-[var(--color-border-subtle)]">
+              <h4 className="text-xs font-semibold text-[var(--color-on-surface-secondary)] uppercase tracking-wider">
+                Context Hints
+              </h4>
+              <Toggle
+                label="Pass file metadata (XMP/EXIF)"
+                value={state.pass_metadata}
+                onChange={(v) => update("pass_metadata", v)}
+                disabled={isRunning}
+              />
+              <Toggle
+                label="Pass file name"
+                value={state.pass_filename}
+                onChange={(v) => update("pass_filename", v)}
+                disabled={isRunning}
+              />
+              <Toggle
+                label="Pass current caption"
+                value={state.pass_current_caption}
+                onChange={(v) => update("pass_current_caption", v)}
+                disabled={isRunning}
+              />
+            </div>
+
+            <FormEntry
+              label="Caption Prefix"
+              value={state.caption_prefix}
+              onChange={(v) => update("caption_prefix", String(v))}
+              placeholder="Optional prefix..."
+              disabled={isRunning}
+            />
+            <FormEntry
+              label="Caption Postfix"
+              value={state.caption_postfix}
+              onChange={(v) => update("caption_postfix", String(v))}
+              placeholder="Optional postfix..."
+              disabled={isRunning}
+            />
+          </div>
+        )}
+
+        <Select
+          label="Mode"
+          options={CAPTION_MODES}
+          value={state.mode}
+          onChange={(v) => update("mode", v)}
+          disabled={isRunning}
+        />
+
+        <Toggle
+          label="Include subfolders"
+          value={state.include_subdirectories}
+          onChange={(v) => update("include_subdirectories", v)}
+          disabled={isRunning}
+        />
+
+        {preview?.ok && (
+          <div className="flex flex-col gap-2 p-3 rounded-[var(--radius-sm)] bg-[var(--color-surface-elevated)] border border-[var(--color-cobalt-600)]/30">
+            <h4 className="text-sm font-semibold text-[var(--color-cobalt-600)]">Preview</h4>
+            <div className="flex gap-3">
+              {preview.image_base64 && (
+                <img
+                  src={`data:image/jpeg;base64,${preview.image_base64}`}
+                  alt="Preview"
+                  className="w-24 h-24 object-cover rounded-[var(--radius-sm)] flex-shrink-0"
+                />
+              )}
+              <div className="flex-1 min-w-0">
+                <p className="text-xs text-[var(--color-on-surface-secondary)] mb-1 truncate">
+                  {preview.image_path.split(/[/\\]/).pop()}
+                </p>
+                <p className="text-sm text-[var(--color-on-surface)] whitespace-pre-wrap break-words">
+                  {preview.caption}
+                </p>
+              </div>
+            </div>
+            {preview.prompt_used && (
+              <details className="text-xs text-[var(--color-on-surface-secondary)]">
+                <summary className="cursor-pointer">Prompt used</summary>
+                <p className="mt-1 whitespace-pre-wrap">{preview.prompt_used}</p>
+              </details>
+            )}
+          </div>
+        )}
+
+        <div className="pt-2">
+          <ProgressBar
+            value={polling.progress}
+            label={polling.progressLabel}
+            indeterminate={isRunning && polling.progress === 0}
+          />
+        </div>
+
+        {error && (
+          <div className="p-3 rounded-[var(--radius-sm)] bg-[var(--color-error-500)]/10 border border-[var(--color-error-500)]/30">
+            <p className="text-sm text-[var(--color-error-500)]">{error}</p>
+          </div>
+        )}
+
+        {status?.status === "completed" && (
+          <div className="p-3 rounded-[var(--radius-sm)] bg-[var(--color-cobalt-600)]/10 border border-[var(--color-cobalt-600)]/30">
+            <p className="text-sm text-[var(--color-cobalt-600)]">Caption generation completed successfully.</p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-between mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <div className="flex gap-2">
+          <Button variant="primary" onClick={handleGenerate} disabled={isRunning || isPreviewing}>
+            {isRunning ? "Generating..." : "Create Captions"}
+          </Button>
+          <Button variant="secondary" onClick={handlePreview} disabled={isRunning || isPreviewing || !state.folder}>
+            {isPreviewing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Eye className="w-4 h-4" />}
+            <span className="ml-1">Preview</span>
+          </Button>
+          {isRunning && (
+            <Button variant="danger" onClick={handleCancel}>
+              Cancel
+            </Button>
+          )}
+        </div>
+        <Button variant="secondary" onClick={onClose} disabled={isRunning}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/ConceptEditorModal.tsx b/web/gui/src/renderer/components/modals/ConceptEditorModal.tsx
new file mode 100644
index 000000000..4fa3a6349
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/ConceptEditorModal.tsx
@@ -0,0 +1,112 @@
+import { produce } from "immer";
+import { useEffect, useState } from "react";
+
+import { ConceptGeneralTab } from "@/components/concepts/ConceptGeneralTab";
+import { ConceptImageAugTab } from "@/components/concepts/ConceptImageAugTab";
+import { ConceptStatsPanel } from "@/components/concepts/ConceptStatsPanel";
+import { ConceptTextAugTab } from "@/components/concepts/ConceptTextAugTab";
+import { Button } from "@/components/shared";
+import type { ConceptConfig } from "@/types/generated/config";
+
+import { ModalBase } from "./ModalBase";
+
+export interface ConceptEditorModalProps {
+  open: boolean;
+  onClose: () => void;
+  concept: ConceptConfig | null;
+  onSave: (updated: ConceptConfig) => void;
+}
+
+type Tab = "general" | "image_aug" | "text_aug" | "statistics";
+
+const tabs: Array<{ id: Tab; label: string }> = [
+  { id: "general", label: "General" },
+  { id: "image_aug", label: "Image Augmentation" },
+  { id: "text_aug", label: "Text Augmentation" },
+  { id: "statistics", label: "Statistics" },
+];
+
+export function ConceptEditorModal({ open, onClose, concept, onSave }: ConceptEditorModalProps) {
+  const [activeTab, setActiveTab] = useState<Tab>("general");
+  const [draft, setDraft] = useState<ConceptConfig | null>(null);
+
+  useEffect(() => {
+    if (open && concept) {
+      setDraft(JSON.parse(JSON.stringify(concept)));
+      setActiveTab("general");
+    }
+  }, [open, concept]);
+
+  if (!draft) return null;
+
+  const update = (path: string, value: unknown) => {
+    setDraft((prev) => {
+      if (!prev) return prev;
+      return produce(prev, (d) => {
+        const keys = path.split(".");
+        let obj: Record<string, unknown> = d as unknown as Record<string, unknown>;
+        for (let i = 0; i < keys.length - 1; i++) {
+          obj = obj[keys[i]] as Record<string, unknown>;
+        }
+        obj[keys[keys.length - 1]] = value;
+      });
+    });
+  };
+
+  const updateImage = (field: keyof ConceptConfig["image"], value: unknown) => update(`image.${field}`, value);
+  const updateText = (field: keyof ConceptConfig["text"], value: unknown) => update(`text.${field}`, value);
+
+  const handleSave = () => {
+    if (draft) {
+      onSave(draft);
+      onClose();
+    }
+  };
+
+  // Use wider modal for image augmentation tab (needs preview panel space)
+  const modalSize = activeTab === "image_aug" ? ("2xl" as const) : ("xl" as const);
+
+  return (
+    <ModalBase
+      open={open}
+      onClose={onClose}
+      title={`Edit: ${draft.name || "Concept"}`}
+      size={modalSize}
+      closeOnBackdrop={false}
+    >
+      <div className="flex gap-1 mb-4 border-b border-[var(--color-border-subtle)]">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`px-4 py-2 text-sm font-medium transition-colors cursor-pointer ${
+              activeTab === tab.id
+                ? "text-[var(--color-cobalt-600)] border-b-2 border-[var(--color-cobalt-600)]"
+                : "text-[var(--color-on-surface-secondary)] hover:text-[var(--color-on-surface)]"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="min-h-[400px] max-h-[60vh] overflow-y-auto">
+        {activeTab === "general" && <ConceptGeneralTab draft={draft} update={update} updateText={updateText} />}
+        {activeTab === "image_aug" && <ConceptImageAugTab draft={draft} updateImage={updateImage} />}
+        {activeTab === "text_aug" && <ConceptTextAugTab draft={draft} updateText={updateText} />}
+        {activeTab === "statistics" && (
+          <ConceptStatsPanel conceptPath={draft.path} includeSubdirectories={draft.include_subdirectories} />
+        )}
+      </div>
+
+      <div className="flex justify-end gap-3 mt-4 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" size="sm" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" onClick={handleSave}>
+          Save
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/ConvertModelModal.tsx b/web/gui/src/renderer/components/modals/ConvertModelModal.tsx
new file mode 100644
index 000000000..4aa20636d
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/ConvertModelModal.tsx
@@ -0,0 +1,160 @@
+import { useState } from "react";
+
+import { toolsApi } from "@/api/toolsApi";
+import { Button, FilePicker, Select } from "@/components/shared";
+import {
+  CONVERT_MODEL_TYPES,
+  CONVERT_OUTPUT_DTYPES,
+  CONVERT_OUTPUT_FORMATS,
+  CONVERT_TRAINING_METHODS,
+} from "@/types/generated/dropdownSources";
+
+import { ModalBase } from "./ModalBase";
+
+export interface ConvertModelModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+type StatusKind = "ready" | "converting" | "success" | "error";
+
+interface Status {
+  kind: StatusKind;
+  message: string;
+}
+
+const STATUS_READY: Status = { kind: "ready", message: "Ready" };
+const STATUS_CONVERTING: Status = { kind: "converting", message: "Converting..." };
+
+export function ConvertModelModal({ open, onClose }: ConvertModelModalProps) {
+  const [modelType, setModelType] = useState("STABLE_DIFFUSION_15");
+  const [trainingMethod, setTrainingMethod] = useState("FINE_TUNE");
+  const [inputName, setInputName] = useState("");
+  const [outputDtype, setOutputDtype] = useState("FLOAT_16");
+  const [outputFormat, setOutputFormat] = useState("SAFETENSORS");
+  const [outputDestination, setOutputDestination] = useState("");
+  const [status, setStatus] = useState<Status>(STATUS_READY);
+
+  const isConverting = status.kind === "converting";
+
+  const handleConvert = async () => {
+    if (!inputName.trim()) {
+      setStatus({ kind: "error", message: "Input name is required." });
+      return;
+    }
+    if (!outputDestination.trim()) {
+      setStatus({ kind: "error", message: "Output destination is required." });
+      return;
+    }
+
+    setStatus(STATUS_CONVERTING);
+    try {
+      const result = await toolsApi.convertModel({
+        model_type: modelType,
+        training_method: trainingMethod,
+        input_name: inputName,
+        output_dtype: outputDtype,
+        output_model_format: outputFormat,
+        output_model_destination: outputDestination,
+      });
+      if (result.ok) {
+        setStatus({ kind: "success", message: "Model converted successfully." });
+      } else {
+        setStatus({ kind: "error", message: result.error ?? "Unknown error during conversion." });
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setStatus({ kind: "error", message });
+    }
+  };
+
+  const statusColor = (() => {
+    switch (status.kind) {
+      case "ready":
+        return "var(--color-on-surface-secondary)";
+      case "converting":
+        return "var(--color-cobalt-600)";
+      case "success":
+        return "var(--color-success-500)";
+      case "error":
+        return "var(--color-error-500)";
+    }
+  })();
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Convert Model" size="md" closeOnBackdrop={!isConverting}>
+      <div className="flex flex-col gap-4">
+        <Select
+          label="Model Type"
+          options={CONVERT_MODEL_TYPES}
+          value={modelType}
+          onChange={setModelType}
+          disabled={isConverting}
+          tooltip="Type of the model"
+        />
+
+        <Select
+          label="Training Method"
+          options={CONVERT_TRAINING_METHODS}
+          value={trainingMethod}
+          onChange={setTrainingMethod}
+          disabled={isConverting}
+          tooltip="The type of model to convert"
+        />
+
+        <FilePicker
+          label="Input Name"
+          value={inputName}
+          onChange={setInputName}
+          disabled={isConverting}
+          tooltip="Filename, directory or Hugging Face repository of the model"
+        />
+
+        <Select
+          label="Output Data Type"
+          options={CONVERT_OUTPUT_DTYPES}
+          value={outputDtype}
+          onChange={setOutputDtype}
+          disabled={isConverting}
+          tooltip="Precision to use when saving the output model"
+        />
+
+        <Select
+          label="Output Format"
+          options={CONVERT_OUTPUT_FORMATS}
+          value={outputFormat}
+          onChange={setOutputFormat}
+          disabled={isConverting}
+          tooltip="Format to use when saving the output model"
+        />
+
+        <FilePicker
+          label="Model Output Destination"
+          value={outputDestination}
+          onChange={setOutputDestination}
+          disabled={isConverting}
+          tooltip="Filename or directory where the output model is saved"
+        />
+      </div>
+
+      <div className="flex items-center justify-between mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <span
+          className="text-sm font-medium truncate max-w-[60%]"
+          style={{ color: statusColor }}
+          title={status.message}
+        >
+          {status.message}
+        </span>
+
+        <div className="flex gap-3">
+          <Button variant="primary" size="md" onClick={handleConvert} disabled={isConverting} loading={isConverting}>
+            {isConverting ? "Converting..." : "Convert"}
+          </Button>
+          <Button variant="secondary" size="md" onClick={onClose} disabled={isConverting}>
+            Close
+          </Button>
+        </div>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx b/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx
new file mode 100644
index 000000000..eb15a5f6c
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from "react";
+
+import { trainingApi } from "@/api/trainingApi";
+import { Button, FormEntry, Select, Toggle } from "@/components/shared";
+import { useTrainingStore } from "@/store/trainingStore";
+import { NoiseSchedulerValues } from "@/types/generated/enums";
+import { TEXTAREA_FULL } from "@/utils/inputStyles";
+
+import { ModalBase } from "./ModalBase";
+
+export interface ManualSamplingModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface ManualSampleState {
+  prompt: string;
+  negative_prompt: string;
+  width: number;
+  height: number;
+  seed: number;
+  random_seed: boolean;
+  diffusion_steps: number;
+  cfg_scale: number;
+  noise_scheduler: string;
+}
+
+const DEFAULT_SAMPLE: ManualSampleState = {
+  prompt: "",
+  negative_prompt: "",
+  width: 512,
+  height: 512,
+  seed: 42,
+  random_seed: false,
+  diffusion_steps: 20,
+  cfg_scale: 7,
+  noise_scheduler: "DDIM",
+};
+
+export function ManualSamplingModal({ open, onClose }: ManualSamplingModalProps) {
+  const [sample, setSample] = useState<ManualSampleState>({ ...DEFAULT_SAMPLE });
+  const [isSampling, setIsSampling] = useState(false);
+  const [sampleImage, setSampleImage] = useState<string | null>(null);
+  const waitingRef = useRef(false);
+  const latestSample = useTrainingStore((s) => s.latestSample);
+
+  useEffect(() => {
+    if (waitingRef.current && latestSample) {
+      setSampleImage(latestSample);
+      waitingRef.current = false;
+    }
+  }, [latestSample]);
+
+  const update = <K extends keyof ManualSampleState>(field: K, value: ManualSampleState[K]) => {
+    setSample((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSample = async () => {
+    setIsSampling(true);
+    waitingRef.current = true;
+    try {
+      await trainingApi.sampleCustom({
+        prompt: sample.prompt,
+        negative_prompt: sample.negative_prompt,
+        height: sample.height,
+        width: sample.width,
+        seed: sample.seed,
+        random_seed: sample.random_seed,
+        diffusion_steps: sample.diffusion_steps,
+        cfg_scale: sample.cfg_scale,
+      });
+    } catch {
+      waitingRef.current = false;
+    } finally {
+      setIsSampling(false);
+    }
+  };
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Manual Sample" size="xl" closeOnBackdrop={false}>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt</span>
+            <textarea
+              value={sample.prompt}
+              onChange={(e) => update("prompt", e.target.value)}
+              rows={3}
+              className={`${TEXTAREA_FULL} resize-y`}
+              placeholder="Enter prompt..."
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium text-[var(--color-on-surface)]">Negative Prompt</span>
+            <textarea
+              value={sample.negative_prompt}
+              onChange={(e) => update("negative_prompt", e.target.value)}
+              rows={2}
+              className={`${TEXTAREA_FULL} resize-y`}
+              placeholder="Enter negative prompt..."
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <FormEntry label="Width" value={sample.width} onChange={(v) => update("width", Number(v))} type="number" />
+            <FormEntry
+              label="Height"
+              value={sample.height}
+              onChange={(v) => update("height", Number(v))}
+              type="number"
+            />
+            <FormEntry
+              label="Steps"
+              value={sample.diffusion_steps}
+              onChange={(v) => update("diffusion_steps", Number(v))}
+              type="number"
+            />
+            <FormEntry
+              label="CFG Scale"
+              value={sample.cfg_scale}
+              onChange={(v) => update("cfg_scale", Number(v))}
+              type="number"
+            />
+            <Select
+              label="Scheduler"
+              options={[...NoiseSchedulerValues]}
+              value={sample.noise_scheduler}
+              onChange={(v) => update("noise_scheduler", v)}
+            />
+            <FormEntry label="Seed" value={sample.seed} onChange={(v) => update("seed", Number(v))} type="number" />
+            <Toggle label="Random Seed" value={sample.random_seed} onChange={(v) => update("random_seed", v)} />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <div className="aspect-square bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] flex items-center justify-center overflow-hidden">
+            {sampleImage ? (
+              <img src={sampleImage} alt="Generated sample" className="max-w-full max-h-full object-contain" />
+            ) : (
+              <span className="text-sm text-[var(--color-on-surface-secondary)]">
+                {isSampling ? "Generating..." : "No sample generated yet"}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-between mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="primary" onClick={handleSample} disabled={isSampling}>
+          {isSampling ? "Sampling..." : "Sample"}
+        </Button>
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/MaskToolModal.tsx b/web/gui/src/renderer/components/modals/MaskToolModal.tsx
new file mode 100644
index 000000000..88c313ef4
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/MaskToolModal.tsx
@@ -0,0 +1,250 @@
+import { useEffect, useState } from "react";
+
+import { toolsApi } from "@/api/toolsApi";
+import { Button, DirPicker, FilePicker, FormEntry, ProgressBar, Select, Toggle } from "@/components/shared";
+import { useToolPolling } from "@/hooks/useToolPolling";
+import { MASK_MODELS, MASK_MODES } from "@/types/generated/dropdownSources";
+
+import { ModalBase } from "./ModalBase";
+
+export interface MaskToolModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface MaskState {
+  model: string;
+  folder: string;
+  prompt: string;
+  mode: string;
+  threshold: number;
+  smooth: number;
+  expand: number;
+  alpha: number;
+  include_subdirectories: boolean;
+  model_path: string;
+}
+
+const DEFAULT_STATE: MaskState = {
+  model: "ClipSeg",
+  folder: "",
+  prompt: "",
+  mode: "fill",
+  threshold: 0.3,
+  smooth: 5,
+  expand: 10,
+  alpha: 1.0,
+  include_subdirectories: false,
+  model_path: "",
+};
+
+export function MaskToolModal({ open, onClose }: MaskToolModalProps) {
+  const [state, setState] = useState<MaskState>({ ...DEFAULT_STATE });
+  const polling = useToolPolling();
+  const { status, isRunning, error } = polling;
+  const [ultralyticsAvailable, setUltralyticsAvailable] = useState<boolean | null>(null);
+
+  const update = <K extends keyof MaskState>(field: K, value: MaskState[K]) => {
+    setState((prev) => ({ ...prev, [field]: value }));
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    toolsApi
+      .getCapabilities()
+      .then((caps) => {
+        setUltralyticsAvailable(caps.ultralytics_available);
+      })
+      .catch(() => {
+        /* ignore */
+      });
+  }, [open]);
+
+  const handleGenerate = async () => {
+    if (!state.folder) {
+      polling.setError("Please select a folder.");
+      return;
+    }
+    if (state.model === "YOLO" && !state.model_path) {
+      polling.setError("Please select a YOLO model file (.pt).");
+      return;
+    }
+    polling.start();
+
+    try {
+      const result = await toolsApi.generateMasks({
+        model: state.model,
+        folder: state.folder,
+        prompt: state.prompt,
+        mode: state.mode,
+        threshold: state.threshold,
+        smooth: state.smooth,
+        expand: state.expand,
+        alpha: state.alpha,
+        include_subdirectories: state.include_subdirectories,
+        model_path: state.model === "YOLO" ? state.model_path : undefined,
+      });
+
+      if (!result.ok) {
+        polling.setError(result.error ?? "Failed to start mask generation");
+        polling.stop();
+      }
+    } catch (err) {
+      polling.setError(err instanceof Error ? err.message : "Unknown error");
+      polling.stop();
+    }
+  };
+
+  const handleCancel = async () => {
+    try {
+      await toolsApi.cancel();
+      polling.stop();
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleOpenEditor = async () => {
+    const api = window.electronAPI;
+    if (api?.openMaskEditor) {
+      await api.openMaskEditor(state.folder);
+    } else {
+      window.open(`/?route=mask-editor&folder=${encodeURIComponent(state.folder)}`, "_blank");
+    }
+  };
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Batch Generate Masks" size="md" closeOnBackdrop={!isRunning}>
+      <div className="flex flex-col gap-4">
+        <Select
+          label="Model"
+          options={MASK_MODELS}
+          value={state.model}
+          onChange={(v) => update("model", v)}
+          disabled={isRunning}
+        />
+
+        {state.model === "YOLO" && (
+          <>
+            <FilePicker
+              label="YOLO Model File"
+              value={state.model_path}
+              onChange={(v) => update("model_path", v)}
+              disabled={isRunning}
+              filters={[{ name: "YOLO Models", extensions: ["pt"] }]}
+              tooltip="Select a YOLO .pt model file for segmentation"
+            />
+            {ultralyticsAvailable === false && (
+              <div className="p-2 rounded-[var(--radius-sm)] bg-[var(--color-error-500)]/10 border border-[var(--color-error-500)]/30">
+                <p className="text-xs text-[var(--color-error-500)]">
+                  Ultralytics is not installed. Install with: pip install ultralytics
+                </p>
+              </div>
+            )}
+          </>
+        )}
+
+        <DirPicker label="Folder" value={state.folder} onChange={(v) => update("folder", v)} disabled={isRunning} />
+
+        {state.model !== "YOLO" && (
+          <FormEntry
+            label="Prompt"
+            value={state.prompt}
+            onChange={(v) => update("prompt", String(v))}
+            placeholder="Masking prompt (for ClipSeg)..."
+            disabled={isRunning}
+          />
+        )}
+
+        <Select
+          label="Mode"
+          options={MASK_MODES}
+          value={state.mode}
+          onChange={(v) => update("mode", v)}
+          disabled={isRunning}
+        />
+
+        <div className="grid grid-cols-2 gap-3">
+          <FormEntry
+            label="Threshold"
+            value={state.threshold}
+            onChange={(v) => update("threshold", Number(v))}
+            type="number"
+            placeholder="0.0 - 1.0"
+            disabled={isRunning}
+          />
+          <FormEntry
+            label="Smooth"
+            value={state.smooth}
+            onChange={(v) => update("smooth", Number(v))}
+            type="number"
+            placeholder="5"
+            disabled={isRunning}
+          />
+          <FormEntry
+            label="Expand"
+            value={state.expand}
+            onChange={(v) => update("expand", Number(v))}
+            type="number"
+            placeholder="10"
+            disabled={isRunning}
+          />
+          <FormEntry
+            label="Alpha"
+            value={state.alpha}
+            onChange={(v) => update("alpha", Number(v))}
+            type="number"
+            placeholder="1.0"
+            disabled={isRunning}
+          />
+        </div>
+
+        <Toggle
+          label="Include subfolders"
+          value={state.include_subdirectories}
+          onChange={(v) => update("include_subdirectories", v)}
+          disabled={isRunning}
+        />
+
+        <div className="pt-2">
+          <ProgressBar
+            value={polling.progress}
+            label={polling.progressLabel}
+            indeterminate={isRunning && polling.progress === 0}
+          />
+        </div>
+
+        {error && (
+          <div className="p-3 rounded-[var(--radius-sm)] bg-[var(--color-error-500)]/10 border border-[var(--color-error-500)]/30">
+            <p className="text-sm text-[var(--color-error-500)]">{error}</p>
+          </div>
+        )}
+
+        {status?.status === "completed" && (
+          <div className="p-3 rounded-[var(--radius-sm)] bg-[var(--color-cobalt-600)]/10 border border-[var(--color-cobalt-600)]/30">
+            <p className="text-sm text-[var(--color-cobalt-600)]">Mask generation completed successfully.</p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-between mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <div className="flex gap-2">
+          <Button variant="primary" onClick={handleGenerate} disabled={isRunning}>
+            {isRunning ? "Generating..." : "Create Masks"}
+          </Button>
+          <Button variant="secondary" onClick={handleOpenEditor} disabled={isRunning}>
+            Open Interactive Editor
+          </Button>
+          {isRunning && (
+            <Button variant="danger" onClick={handleCancel}>
+              Cancel
+            </Button>
+          )}
+        </div>
+        <Button variant="secondary" onClick={onClose} disabled={isRunning}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/ModalBase.tsx b/web/gui/src/renderer/components/modals/ModalBase.tsx
new file mode 100644
index 000000000..8a829530e
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/ModalBase.tsx
@@ -0,0 +1,132 @@
+import { X } from "lucide-react";
+import { type ReactNode, useEffect, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { IconButton } from "@/components/shared";
+
+export interface ModalBaseProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+}
+
+const sizeClasses: Record<string, string> = {
+  sm: "max-w-[400px]",
+  md: "max-w-[600px]",
+  lg: "max-w-[800px]",
+  xl: "max-w-[1000px]",
+  "2xl": "max-w-[1200px]",
+  full: "max-w-none w-[calc(100vw-32px)]",
+};
+
+export function ModalBase({
+  open,
+  onClose,
+  title,
+  children,
+  size = "md",
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+}: ModalBaseProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    if (!open || !closeOnEscape) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, onClose, closeOnEscape]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const modal = dialogRef.current;
+    if (!modal) return;
+
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      const focusable = modal.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable.length === 0) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    modal.addEventListener("keydown", handleKeyDown);
+
+    setTimeout(() => {
+      const firstFocusable = modal.querySelector<HTMLElement>("button, input, select, textarea");
+      firstFocusable?.focus();
+    }, 50);
+
+    return () => {
+      modal.removeEventListener("keydown", handleKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={handleBackdropClick}
+      style={{ backdropFilter: "blur(8px)", background: "rgba(0, 0, 0, 0.5)" }}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className={`w-full ${sizeClasses[size]} ${size === "full" ? "h-[calc(100vh-32px)]" : "max-h-[90vh]"} flex flex-col rounded-[var(--radius-md)]
+          bg-[var(--color-surface)] border border-[var(--color-border-subtle)]
+          shadow-[var(--shadow-3)] animate-[rowFade_200ms_ease-out]`}
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-subtle)]">
+          <h2 id={titleId} className="text-lg font-semibold text-[var(--color-on-surface)]">
+            {title}
+          </h2>
+          <IconButton
+            icon={<X className="w-full h-full" />}
+            label="Close"
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+          />
+        </div>
+        <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/MuonAdamModal.tsx b/web/gui/src/renderer/components/modals/MuonAdamModal.tsx
new file mode 100644
index 000000000..5aa9d7a3d
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/MuonAdamModal.tsx
@@ -0,0 +1,107 @@
+import { FormEntry, Toggle } from "@/components/shared";
+
+import { ModalBase } from "./ModalBase";
+
+export interface MuonAdamModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function MuonAdamModal({ open, onClose }: MuonAdamModalProps) {
+  return (
+    <ModalBase open={open} onClose={onClose} title="Muon + Adam Settings" size="md">
+      <div className="flex flex-col gap-4">
+        <h4 className="text-sm font-semibold text-[var(--color-on-surface-secondary)] uppercase tracking-wide">
+          Muon Parameters
+        </h4>
+        <FormEntry
+          label="Muon Adam LR"
+          configPath="optimizer.muon_adam_lr"
+          type="number"
+          tooltip="Learning rate for Adam portion of Muon optimizer"
+          nullable
+        />
+        <FormEntry
+          label="Muon TE1 Adam LR"
+          configPath="optimizer.muon_te1_adam_lr"
+          type="number"
+          tooltip="Adam LR for Text Encoder 1"
+          nullable
+        />
+        <FormEntry
+          label="Muon TE2 Adam LR"
+          configPath="optimizer.muon_te2_adam_lr"
+          type="number"
+          tooltip="Adam LR for Text Encoder 2"
+          nullable
+        />
+        <Toggle
+          configPath="optimizer.MuonWithAuxAdam"
+          label="Muon with Auxiliary Adam"
+          tooltip="Use auxiliary Adam optimizer alongside Muon"
+        />
+        <FormEntry
+          label="NS Steps"
+          configPath="optimizer.ns_steps"
+          type="number"
+          tooltip="Newton-Schulz iteration steps"
+          nullable
+        />
+        <Toggle
+          configPath="optimizer.accelerated_ns"
+          label="Accelerated NS"
+          tooltip="Use accelerated Newton-Schulz iterations"
+        />
+
+        <h4 className="text-sm font-semibold text-[var(--color-on-surface-secondary)] uppercase tracking-wide mt-4">
+          Adam Regex Filter
+        </h4>
+        <Toggle
+          configPath="optimizer.muon_adam_regex"
+          label="Use Adam Regex"
+          tooltip="Use regex to select which parameters use Adam vs Muon"
+        />
+
+        <h4 className="text-sm font-semibold text-[var(--color-on-surface-secondary)] uppercase tracking-wide mt-4">
+          Normuon Variant
+        </h4>
+        <Toggle configPath="optimizer.normuon_variant" label="Normuon Variant" tooltip="Use the Normuon variant" />
+        <FormEntry
+          label="Beta2 Normuon"
+          configPath="optimizer.beta2_normuon"
+          type="number"
+          tooltip="Beta2 for Normuon variant"
+          nullable
+        />
+        <FormEntry
+          label="Normuon Epsilon"
+          configPath="optimizer.normuon_eps"
+          type="number"
+          tooltip="Epsilon for Normuon variant"
+          nullable
+        />
+
+        <h4 className="text-sm font-semibold text-[var(--color-on-surface-secondary)] uppercase tracking-wide mt-4">
+          Orthogonalization
+        </h4>
+        <Toggle configPath="optimizer.low_rank_ortho" label="Low Rank Ortho" tooltip="Use low-rank orthogonalization" />
+        <FormEntry
+          label="Ortho Rank"
+          configPath="optimizer.ortho_rank"
+          type="number"
+          tooltip="Rank for low-rank orthogonalization"
+          nullable
+        />
+      </div>
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <button
+          onClick={onClose}
+          className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium bg-transparent border border-[var(--color-border-subtle)] text-[var(--color-on-surface)] hover:border-[var(--color-cobalt-600)] transition-colors duration-200 cursor-pointer"
+        >
+          Close
+        </button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/OffloadingModal.tsx b/web/gui/src/renderer/components/modals/OffloadingModal.tsx
new file mode 100644
index 000000000..db389a468
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/OffloadingModal.tsx
@@ -0,0 +1,46 @@
+import { Button, FormEntry, Select, Toggle } from "@/components/shared";
+import { GradientCheckpointingMethodValues } from "@/types/generated/enums";
+
+import { ModalBase } from "./ModalBase";
+
+export interface OffloadingModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function OffloadingModal({ open, onClose }: OffloadingModalProps) {
+  return (
+    <ModalBase open={open} onClose={onClose} title="Offloading & Checkpointing" size="sm">
+      <div className="flex flex-col gap-4">
+        <Select
+          label="Gradient Checkpointing"
+          configPath="gradient_checkpointing"
+          options={[...GradientCheckpointingMethodValues]}
+          tooltip="Enables gradient checkpointing. This reduces memory usage, but increases training time"
+        />
+        <FormEntry
+          label="Layer Offload Fraction"
+          configPath="layer_offload_fraction"
+          type="number"
+          tooltip="Fraction of layers to offload to CPU (0 = none, 1 = all)"
+        />
+        <Toggle
+          configPath="enable_async_offloading"
+          label="Async Offloading"
+          tooltip="Enable asynchronous layer offloading for better performance"
+        />
+        <Toggle
+          configPath="enable_activation_offloading"
+          label="Activation Offloading"
+          tooltip="Offload activations to CPU to save GPU memory"
+        />
+      </div>
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/OptimizerParamsModal.tsx b/web/gui/src/renderer/components/modals/OptimizerParamsModal.tsx
new file mode 100644
index 000000000..0334971ed
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/OptimizerParamsModal.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { Button, FormEntry, Toggle } from "@/components/shared";
+import { useConfigField } from "@/hooks/useConfigField";
+import { useConfigStore } from "@/store/configStore";
+import type { Optimizer } from "@/types/generated/enums";
+
+import { ModalBase } from "./ModalBase";
+import { MuonAdamModal } from "./MuonAdamModal";
+
+export interface OptimizerParamsModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function OptimizerParamsModal({ open, onClose }: OptimizerParamsModalProps) {
+  const [optimizer] = useConfigField<Optimizer>("optimizer.optimizer");
+  const [muonAdamOpen, setMuonAdamOpen] = useState(false);
+  const changeOptimizer = useConfigStore((s) => s.changeOptimizer);
+  const paramsData = useConfigStore((s) => s.optimizerParams);
+  const paramsFetched = useConfigStore((s) => s.optimizerParamsFetched);
+  const fetchOptimizerParams = useConfigStore((s) => s.fetchOptimizerParams);
+
+  const optimizerName = optimizer as string | undefined;
+
+  // Fetch optimizer metadata once (cached in the store)
+  useEffect(() => {
+    void fetchOptimizerParams();
+  }, [fetchOptimizerParams]);
+
+  const loading = !paramsData && !paramsFetched;
+
+  // Get the parameter keys for the current optimizer
+  const optimizerInfo = paramsData && optimizerName ? paramsData.optimizers[optimizerName] : null;
+  const detailMap = useMemo(() => paramsData?.detail_map ?? {}, [paramsData]);
+
+  // Split parameters into columns by type, filtering to only those with metadata
+  const { numericParams, boolParams, strParams } = useMemo(() => {
+    if (!optimizerInfo) return { numericParams: [] as string[], boolParams: [] as string[], strParams: [] as string[] };
+
+    const numeric: string[] = [];
+    const bool: string[] = [];
+    const str: string[] = [];
+
+    for (const key of optimizerInfo.keys) {
+      // Skip muon_adam_config — has its own modal
+      if (key === "muon_adam_config") continue;
+
+      const detail = detailMap[key];
+      if (!detail) continue;
+
+      if (detail.type === "bool") {
+        bool.push(key);
+      } else if (detail.type === "str") {
+        str.push(key);
+      } else {
+        numeric.push(key);
+      }
+    }
+    return { numericParams: numeric, boolParams: bool, strParams: str };
+  }, [optimizerInfo, detailMap]);
+
+  const isMuonFamily = optimizerName && (optimizerName.includes("MUON") || optimizerName.includes("ADAMUON"));
+
+  return (
+    <ModalBase open={open} onClose={onClose} title={`${optimizer ?? "Optimizer"} Parameters`} size="lg">
+      <div className="flex gap-2 mb-4">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            if (optimizerName) changeOptimizer(optimizerName);
+          }}
+        >
+          Load Defaults
+        </Button>
+        {isMuonFamily && (
+          <Button variant="secondary" size="sm" onClick={() => setMuonAdamOpen(true)}>
+            Muon + Adam Settings
+          </Button>
+        )}
+      </div>
+
+      {loading && (
+        <p className="text-sm text-[var(--color-on-surface-secondary)] py-8 text-center">
+          Loading optimizer parameters...
+        </p>
+      )}
+
+      {!loading && !optimizerInfo && (
+        <p className="text-sm text-[var(--color-on-surface-secondary)] py-8 text-center">
+          No parameter metadata available for this optimizer.
+        </p>
+      )}
+
+      {!loading && optimizerInfo && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3">
+          {numericParams.map((param) => (
+            <FormEntry
+              key={param}
+              label={detailMap[param]?.title ?? param}
+              configPath={`optimizer.${param}`}
+              type="number"
+              tooltip={detailMap[param]?.tooltip}
+              nullable
+            />
+          ))}
+          {strParams.map((param) => (
+            <FormEntry
+              key={param}
+              label={detailMap[param]?.title ?? param}
+              configPath={`optimizer.${param}`}
+              tooltip={detailMap[param]?.tooltip}
+              nullable
+            />
+          ))}
+          {boolParams.map((param) => (
+            <Toggle
+              key={param}
+              configPath={`optimizer.${param}`}
+              label={detailMap[param]?.title ?? param}
+              tooltip={detailMap[param]?.tooltip}
+            />
+          ))}
+        </div>
+      )}
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+      <MuonAdamModal open={muonAdamOpen} onClose={() => setMuonAdamOpen(false)} />
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/ProfilingPanel.tsx b/web/gui/src/renderer/components/modals/ProfilingPanel.tsx
new file mode 100644
index 000000000..4d624db2c
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/ProfilingPanel.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+
+import { systemApi } from "@/api/systemApi";
+import { Button } from "@/components/shared";
+
+import { ModalBase } from "./ModalBase";
+
+export interface ProfilingPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+type Status =
+  | { kind: "idle" }
+  | { kind: "busy" }
+  | { kind: "ok"; message: string }
+  | { kind: "error"; message: string };
+
+export function ProfilingPanel({ open, onClose }: ProfilingPanelProps) {
+  const [scaleneActive, setScaleneActive] = useState(false);
+  const [status, setStatus] = useState<Status>({ kind: "idle" });
+
+  const handleDumpStack = async () => {
+    setStatus({ kind: "busy" });
+    try {
+      const res = await systemApi.dumpStacks();
+      if (res.ok && res.path) {
+        setStatus({ kind: "ok", message: `Stacks written to ${res.path}` });
+      } else {
+        setStatus({ kind: "error", message: res.error ?? "Unknown error dumping stacks" });
+      }
+    } catch (e) {
+      setStatus({ kind: "error", message: e instanceof Error ? e.message : String(e) });
+    }
+  };
+
+  const handleToggleProfiling = async () => {
+    setStatus({ kind: "busy" });
+    try {
+      const res = await systemApi.toggleProfiling();
+      if (res.ok) {
+        setScaleneActive(res.active);
+        setStatus({
+          kind: "ok",
+          message: res.active ? "Scalene profiling started" : "Scalene profiling stopped",
+        });
+      } else {
+        setStatus({ kind: "error", message: res.error ?? "Toggle failed" });
+      }
+    } catch (e) {
+      setStatus({ kind: "error", message: e instanceof Error ? e.message : String(e) });
+    }
+  };
+
+  const messageColor =
+    status.kind === "error"
+      ? "var(--color-error-500)"
+      : status.kind === "ok"
+        ? "var(--color-success-500)"
+        : "var(--color-on-surface-secondary)";
+  const message =
+    status.kind === "ok" || status.kind === "error"
+      ? status.message
+      : status.kind === "busy"
+        ? "Working..."
+        : "Inactive";
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Profiling" size="sm">
+      <div className="flex flex-col gap-4">
+        <Button variant="secondary" onClick={handleDumpStack} disabled={status.kind === "busy"}>
+          Dump Python Thread Stacks
+        </Button>
+        <Button
+          variant={scaleneActive ? "primary" : "secondary"}
+          onClick={handleToggleProfiling}
+          disabled={status.kind === "busy"}
+        >
+          {scaleneActive ? "Stop Scalene Profiling" : "Start Scalene Profiling"}
+        </Button>
+        <div className="p-3 rounded-[var(--radius-sm)] bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]">
+          <p className="text-sm break-words" style={{ color: messageColor }}>
+            {message}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/SampleParamsModal.tsx b/web/gui/src/renderer/components/modals/SampleParamsModal.tsx
new file mode 100644
index 000000000..964fed2a0
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/SampleParamsModal.tsx
@@ -0,0 +1,102 @@
+import { Dice5 } from "lucide-react";
+
+import { Button, FilePicker, FormEntry, Select, Toggle } from "@/components/shared";
+import { useConfigField } from "@/hooks/useConfigField";
+import { NoiseSchedulerValues } from "@/types/generated/enums";
+import { MODEL_TYPE_GROUPS } from "@/types/generated/modelTypeInfo";
+import { TEXTAREA_FULL } from "@/utils/inputStyles";
+
+import { ModalBase } from "./ModalBase";
+
+export interface SampleParamsModalProps {
+  open: boolean;
+  onClose: () => void;
+  sampleIndex: number;
+}
+
+export function SampleParamsModal({ open, onClose, sampleIndex }: SampleParamsModalProps) {
+  const p = `samples.${sampleIndex}`;
+  const [prompt, setPrompt] = useConfigField<string>(`${p}.prompt`);
+  const [negativePrompt, setNegativePrompt] = useConfigField<string>(`${p}.negative_prompt`);
+  const [, setSeed] = useConfigField<number>(`${p}.seed`);
+  const [modelType] = useConfigField<string>("model_type");
+  const isFlowMatching = modelType
+    ? (MODEL_TYPE_GROUPS.is_flow_matching as readonly string[]).includes(modelType)
+    : false;
+
+  const rerollSeed = () => setSeed(Math.floor(Math.random() * 2 ** 30));
+
+  return (
+    <ModalBase open={open} onClose={onClose} title={`Sample ${sampleIndex + 1} Parameters`} size="xl">
+      <div className="flex flex-col gap-3">
+        <div>
+          <label className="block text-sm font-medium text-[var(--color-on-surface)] mb-1">Prompt</label>
+          <textarea
+            value={prompt ?? ""}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Enter the prompt to sample with..."
+            className={TEXTAREA_FULL}
+            rows={4}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-[var(--color-on-surface)] mb-1">Negative Prompt</label>
+          <textarea
+            value={negativePrompt ?? ""}
+            onChange={(e) => setNegativePrompt(e.target.value)}
+            placeholder="(Optional) Enter what to avoid..."
+            className={TEXTAREA_FULL}
+            rows={2}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        <FormEntry label="Width" configPath={`${p}.width`} type="number" />
+        <FormEntry label="Height" configPath={`${p}.height`} type="number" />
+        <div className="flex items-end gap-2">
+          <FormEntry label="Seed" configPath={`${p}.seed`} type="number" />
+          <Button variant="secondary" size="sm" onClick={rerollSeed} title="Reroll seed">
+            <Dice5 className="w-4 h-4" />
+          </Button>
+        </div>
+        <Toggle configPath={`${p}.random_seed`} label="Random Seed" />
+        <FormEntry label="Diffusion Steps" configPath={`${p}.diffusion_steps`} type="number" />
+        <FormEntry label="CFG Scale" configPath={`${p}.cfg_scale`} type="number" />
+        {!isFlowMatching && (
+          <Select label="Noise Scheduler" configPath={`${p}.noise_scheduler`} options={[...NoiseSchedulerValues]} />
+        )}
+
+        <FormEntry label="Frames" configPath={`${p}.frames`} type="number" tooltip="Frame count for video models" />
+        <FormEntry
+          label="Audio Length (s)"
+          configPath={`${p}.length`}
+          type="number"
+          tooltip="Length in seconds for audio models"
+        />
+
+        <FormEntry label="TE1 Layer Skip" configPath={`${p}.text_encoder_1_layer_skip`} type="number" />
+        <FormEntry label="TE1 Seq Length" configPath={`${p}.text_encoder_1_sequence_length`} type="number" nullable />
+        <FormEntry label="TE2 Layer Skip" configPath={`${p}.text_encoder_2_layer_skip`} type="number" />
+        <FormEntry label="TE2 Seq Length" configPath={`${p}.text_encoder_2_sequence_length`} type="number" nullable />
+        <FormEntry label="TE3 Layer Skip" configPath={`${p}.text_encoder_3_layer_skip`} type="number" />
+        <FormEntry label="TE4 Layer Skip" configPath={`${p}.text_encoder_4_layer_skip`} type="number" />
+
+        <Toggle configPath={`${p}.transformer_attention_mask`} label="Attention Mask" />
+        <Toggle configPath={`${p}.force_last_timestep`} label="Force Last Timestep" />
+        <Toggle configPath={`${p}.sample_inpainting`} label="Sample Inpainting" />
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 mt-4">
+        <FilePicker label="Base Image" configPath={`${p}.base_image_path`} tooltip="Base image for inpainting" />
+        <FilePicker label="Mask Image" configPath={`${p}.mask_image_path`} tooltip="Mask image for inpainting" />
+      </div>
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/SavePresetModal.tsx b/web/gui/src/renderer/components/modals/SavePresetModal.tsx
new file mode 100644
index 000000000..517243076
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/SavePresetModal.tsx
@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@/components/shared";
+import { INPUT_FULL } from "@/utils/inputStyles";
+
+import { ModalBase } from "./ModalBase";
+
+export interface SavePresetModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (name: string) => void;
+}
+
+export function SavePresetModal({ isOpen, onClose, onSave }: SavePresetModalProps) {
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    if (!isOpen) setName("");
+  }, [isOpen]);
+
+  const handleSave = useCallback(() => {
+    const trimmed = name.trim();
+    if (trimmed) {
+      onSave(trimmed);
+      setName("");
+    }
+  }, [name, onSave]);
+
+  const handleClose = useCallback(() => {
+    setName("");
+    onClose();
+  }, [onClose]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && name.trim()) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+
+  return (
+    <ModalBase open={isOpen} onClose={handleClose} title="Save Preset" size="sm">
+      <div className="flex flex-col gap-4">
+        <label className="flex flex-col gap-1.5">
+          <span className="text-sm font-medium text-[var(--color-on-surface)]">Preset Name</span>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className={INPUT_FULL}
+            placeholder="My preset"
+            autoFocus
+          />
+        </label>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" size="md" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="md" onClick={handleSave} disabled={!name.trim()}>
+          Save
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/SchedulerParamsModal.tsx b/web/gui/src/renderer/components/modals/SchedulerParamsModal.tsx
new file mode 100644
index 000000000..864fd1a58
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/SchedulerParamsModal.tsx
@@ -0,0 +1,128 @@
+import { Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button, FormEntry } from "@/components/shared";
+import { useConfigField } from "@/hooks/useConfigField";
+
+import { ModalBase } from "./ModalBase";
+
+interface SchedulerParam {
+  key: string;
+  value: string;
+}
+
+export interface SchedulerParamsModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function SchedulerParamsModal({ open, onClose }: SchedulerParamsModalProps) {
+  const [storedParams, setStoredParams] = useConfigField<Array<Record<string, string>> | null>("scheduler_params");
+  const [scheduler] = useConfigField<string>("learning_rate_scheduler");
+  const isCustom = scheduler === "CUSTOM";
+  const [params, setParams] = useState<SchedulerParam[]>([]);
+
+  useEffect(() => {
+    if (open && storedParams) {
+      const entries = storedParams.flatMap((obj) => Object.entries(obj).map(([key, value]) => ({ key, value })));
+      setParams(entries.length > 0 ? entries : [{ key: "", value: "" }]);
+    } else if (open) {
+      setParams([{ key: "", value: "" }]);
+    }
+  }, [open, storedParams]);
+
+  const addParam = () => setParams([...params, { key: "", value: "" }]);
+
+  const removeParam = (index: number) => {
+    const next = params.filter((_, i) => i !== index);
+    setParams(next.length > 0 ? next : [{ key: "", value: "" }]);
+  };
+
+  const updateParam = (index: number, field: "key" | "value", val: string) => {
+    setParams(params.map((p, i) => (i === index ? { ...p, [field]: val } : p)));
+  };
+
+  const handleSave = () => {
+    const filtered = params.filter((p) => p.key.trim() !== "");
+    const result = filtered.map((p) => ({ [p.key]: p.value }));
+    setStoredParams(result.length > 0 ? result : null);
+    onClose();
+  };
+
+  const variables = ["%LR%", "%EPOCHS%", "%STEPS_PER_EPOCH%", "%TOTAL_STEPS%", "%SCHEDULER_STEPS%"];
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Scheduler Parameters" size="md">
+      {isCustom && (
+        <div className="mb-4">
+          <FormEntry
+            label="Custom Scheduler Class"
+            configPath="custom_learning_rate_scheduler"
+            tooltip="Python class path for a custom learning rate scheduler"
+          />
+        </div>
+      )}
+
+      <div className="mb-4 p-3 rounded-[var(--radius-sm)] bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]">
+        <p className="text-xs font-medium text-[var(--color-on-surface-secondary)] mb-1">Available Variables:</p>
+        <div className="flex flex-wrap gap-2">
+          {variables.map((v) => (
+            <code
+              key={v}
+              className="text-xs px-2 py-0.5 rounded bg-[var(--color-surface)] text-[var(--color-cobalt-600)]"
+            >
+              {v}
+            </code>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <div className="grid grid-cols-[1fr_1fr_40px] gap-2 text-xs font-medium text-[var(--color-on-surface-secondary)] uppercase tracking-wide">
+          <span>Key</span>
+          <span>Value</span>
+          <span></span>
+        </div>
+        {params.map((param, i) => (
+          <div key={i} className="grid grid-cols-[1fr_1fr_40px] gap-2">
+            <input
+              value={param.key}
+              onChange={(e) => updateParam(i, "key", e.target.value)}
+              placeholder="parameter_name"
+              className="px-3 py-2 rounded-[var(--radius-sm)] text-sm bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-[var(--color-on-surface)] focus:outline-none focus:ring-2 focus:ring-[var(--color-cobalt-600)]"
+            />
+            <input
+              value={param.value}
+              onChange={(e) => updateParam(i, "value", e.target.value)}
+              placeholder="value"
+              className="px-3 py-2 rounded-[var(--radius-sm)] text-sm bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-[var(--color-on-surface)] focus:outline-none focus:ring-2 focus:ring-[var(--color-cobalt-600)]"
+            />
+            <button
+              onClick={() => removeParam(i)}
+              className="flex items-center justify-center text-[var(--color-error-500)] hover:opacity-80 cursor-pointer"
+              aria-label="Remove parameter"
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <button
+        onClick={addParam}
+        className="mt-3 flex items-center gap-1 text-sm text-[var(--color-cobalt-600)] hover:text-[var(--color-cobalt-600)] cursor-pointer"
+      >
+        <Plus className="w-4 h-4" /> Add Parameter
+      </button>
+
+      <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" size="sm" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" onClick={handleSave}>
+          Save
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx b/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx
new file mode 100644
index 000000000..fc33d0a29
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx
@@ -0,0 +1,316 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { type SamplerStatusResponse, samplingApi, type StandaloneSampleRequest } from "@/api/samplingApi";
+import { Button, Card, FormEntry, ProgressBar, Select, Toggle } from "@/components/shared";
+import { NoiseSchedulerValues } from "@/types/generated/enums";
+import { TEXTAREA_FULL } from "@/utils/inputStyles";
+
+import { ModalBase } from "./ModalBase";
+
+export interface StandaloneSamplingModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface SampleState {
+  prompt: string;
+  negative_prompt: string;
+  width: number;
+  height: number;
+  seed: number;
+  random_seed: boolean;
+  diffusion_steps: number;
+  cfg_scale: number;
+  noise_scheduler: string;
+}
+
+const DEFAULT_SAMPLE: SampleState = {
+  prompt: "",
+  negative_prompt: "",
+  width: 512,
+  height: 512,
+  seed: 42,
+  random_seed: false,
+  diffusion_steps: 20,
+  cfg_scale: 7,
+  noise_scheduler: "DDIM",
+};
+
+type SamplerStatus = SamplerStatusResponse["status"];
+
+const STATUS_LABELS: Record<SamplerStatus, string> = {
+  idle: "Not loaded",
+  loading: "Loading model...",
+  ready: "Ready",
+  sampling: "Generating sample...",
+  error: "Error",
+};
+
+const STATUS_COLORS: Record<SamplerStatus, string> = {
+  idle: "var(--color-on-surface-secondary)",
+  loading: "var(--color-warning-500, #f59e0b)",
+  ready: "var(--color-success-500)",
+  sampling: "var(--color-cobalt-600)",
+  error: "var(--color-error-500)",
+};
+
+export function StandaloneSamplingModal({ open, onClose }: StandaloneSamplingModalProps) {
+  const [sample, setSample] = useState<SampleState>({ ...DEFAULT_SAMPLE });
+  const [status, setStatus] = useState<SamplerStatus>("idle");
+  const [modelLoaded, setModelLoaded] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [sampleImage, setSampleImage] = useState<string | null>(null);
+  const [progress, setProgress] = useState({ step: 0, max_step: 0 });
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const update = <K extends keyof SampleState>(field: K, value: SampleState[K]) => {
+    setSample((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await samplingApi.getStatus();
+      setStatus(res.status);
+      setModelLoaded(res.model_loaded);
+      setErrorMessage(res.error);
+      setProgress(res.sample_progress);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+      return;
+    }
+
+    fetchStatus();
+    pollRef.current = setInterval(fetchStatus, 1000);
+
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+    };
+  }, [open, fetchStatus]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (status !== "loading" && status !== "sampling") return;
+
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+    }
+    pollRef.current = setInterval(fetchStatus, 300);
+
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+    };
+  }, [open, status, fetchStatus]);
+
+  const handleLoadModel = async () => {
+    setErrorMessage(null);
+    try {
+      const res = await samplingApi.loadModel();
+      if (!res.ok) {
+        setErrorMessage(res.error);
+      }
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Failed to load model");
+    }
+    fetchStatus();
+  };
+
+  const handleUnloadModel = async () => {
+    setErrorMessage(null);
+    setSampleImage(null);
+    try {
+      const res = await samplingApi.unload();
+      if (!res.ok) {
+        setErrorMessage(res.error);
+      }
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Failed to unload model");
+    }
+    fetchStatus();
+  };
+
+  const handleSample = async () => {
+    setErrorMessage(null);
+    try {
+      const params: StandaloneSampleRequest = {
+        prompt: sample.prompt,
+        negative_prompt: sample.negative_prompt,
+        width: sample.width,
+        height: sample.height,
+        seed: sample.seed,
+        random_seed: sample.random_seed,
+        diffusion_steps: sample.diffusion_steps,
+        cfg_scale: sample.cfg_scale,
+        noise_scheduler: sample.noise_scheduler,
+      };
+      const res = await samplingApi.sample(params);
+      if (!res.ok) {
+        setErrorMessage(res.error);
+      } else if (res.sample?.data && res.sample.file_type === "IMAGE") {
+        setSampleImage(`data:image/png;base64,${res.sample.data}`);
+      }
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Sampling failed");
+    }
+    fetchStatus();
+  };
+
+  const isLoading = status === "loading";
+  const isSampling = status === "sampling";
+  const isBusy = isLoading || isSampling;
+  const canSample = modelLoaded && !isBusy;
+  const canLoad = !modelLoaded && !isBusy;
+  const canUnload = modelLoaded && !isBusy;
+  const progressPercent = progress.max_step > 0 ? (progress.step / progress.max_step) * 100 : 0;
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Standalone Sampling" size="xl" closeOnBackdrop={false}>
+      <Card hoverable={false} padding="sm" className="mb-4">
+        <div className="flex items-center justify-between gap-4 flex-wrap">
+          <div className="flex items-center gap-3">
+            <div className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: STATUS_COLORS[status] }} />
+            <div className="flex flex-col">
+              <span className="text-sm font-medium text-[var(--color-on-surface)]">{STATUS_LABELS[status]}</span>
+              {errorMessage && (
+                <span className="text-xs text-[var(--color-error-500)] mt-0.5 break-all">{errorMessage}</span>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="primary" size="sm" onClick={handleLoadModel} disabled={!canLoad} loading={isLoading}>
+              Load Model
+            </Button>
+            <Button variant="secondary" size="sm" onClick={handleUnloadModel} disabled={!canUnload}>
+              Unload Model
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt</span>
+            <textarea
+              value={sample.prompt}
+              onChange={(e) => update("prompt", e.target.value)}
+              rows={3}
+              disabled={isBusy}
+              className={`${TEXTAREA_FULL} resize-y`}
+              placeholder="Enter prompt..."
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium text-[var(--color-on-surface)]">Negative Prompt</span>
+            <textarea
+              value={sample.negative_prompt}
+              onChange={(e) => update("negative_prompt", e.target.value)}
+              rows={2}
+              disabled={isBusy}
+              className={`${TEXTAREA_FULL} resize-y`}
+              placeholder="Enter negative prompt..."
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <FormEntry
+              label="Width"
+              value={sample.width}
+              onChange={(v) => update("width", Number(v))}
+              type="number"
+              disabled={isBusy}
+            />
+            <FormEntry
+              label="Height"
+              value={sample.height}
+              onChange={(v) => update("height", Number(v))}
+              type="number"
+              disabled={isBusy}
+            />
+            <FormEntry
+              label="Steps"
+              value={sample.diffusion_steps}
+              onChange={(v) => update("diffusion_steps", Number(v))}
+              type="number"
+              disabled={isBusy}
+            />
+            <FormEntry
+              label="CFG Scale"
+              value={sample.cfg_scale}
+              onChange={(v) => update("cfg_scale", Number(v))}
+              type="number"
+              disabled={isBusy}
+            />
+            <Select
+              label="Scheduler"
+              options={[...NoiseSchedulerValues]}
+              value={sample.noise_scheduler}
+              onChange={(v) => update("noise_scheduler", v)}
+              disabled={isBusy}
+            />
+            <FormEntry
+              label="Seed"
+              value={sample.seed}
+              onChange={(v) => update("seed", Number(v))}
+              type="number"
+              disabled={isBusy}
+            />
+            <Toggle
+              label="Random Seed"
+              value={sample.random_seed}
+              onChange={(v) => update("random_seed", v)}
+              disabled={isBusy}
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <div className="aspect-square bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] flex items-center justify-center overflow-hidden">
+            {sampleImage ? (
+              <img src={sampleImage} alt="Generated sample" className="max-w-full max-h-full object-contain" />
+            ) : (
+              <span className="text-sm text-[var(--color-on-surface-secondary)]">
+                {isSampling
+                  ? "Generating..."
+                  : modelLoaded
+                    ? "Model ready -- click Generate to sample"
+                    : "Load a model to begin sampling"}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        {isSampling && (
+          <ProgressBar value={progressPercent} label={`Sampling step ${progress.step} / ${progress.max_step}`} />
+        )}
+        {isLoading && <ProgressBar value={0} indeterminate label="Loading model..." />}
+
+        <div className="flex justify-between">
+          <Button variant="primary" onClick={handleSample} disabled={!canSample} loading={isSampling}>
+            {isSampling ? "Generating..." : "Generate Sample"}
+          </Button>
+          <Button variant="secondary" onClick={onClose} disabled={isBusy}>
+            Close
+          </Button>
+        </div>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/TimestepDistModal.tsx b/web/gui/src/renderer/components/modals/TimestepDistModal.tsx
new file mode 100644
index 000000000..e13e5936b
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/TimestepDistModal.tsx
@@ -0,0 +1,262 @@
+import { RefreshCw } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+
+import { Button, FormEntry, Select, Toggle } from "@/components/shared";
+import { useConfigField } from "@/hooks/useConfigField";
+import type { TimestepDistribution } from "@/types/generated/enums";
+import { TimestepDistributionValues } from "@/types/generated/enums";
+import { formatValue, generateTicks } from "@/utils/chartUtils";
+import { computeTimestepHistogram } from "@/utils/timestepDistribution";
+
+import { ModalBase } from "./ModalBase";
+
+/* ── Chart constants ──────────────────────────────────────── */
+
+const CHART_W = 500;
+const CHART_H = 280;
+const PAD = { top: 16, right: 16, bottom: 32, left: 56 };
+const X_TICKS = [0, 200, 400, 600, 800, 999];
+
+/* ── SVG histogram ────────────────────────────────────────── */
+
+function DistributionChart({ bins }: { bins: Float64Array }) {
+  const plotW = CHART_W - PAD.left - PAD.right;
+  const plotH = CHART_H - PAD.top - PAD.bottom;
+
+  let maxVal = 0;
+  for (const v of bins) {
+    if (v > maxVal) maxVal = v;
+  }
+  const yMax = maxVal || 1;
+
+  const xScale = (bin: number) => PAD.left + (bin / (bins.length - 1)) * plotW;
+  const yScale = (val: number) => PAD.top + plotH - (val / yMax) * plotH;
+
+  // Build line + area paths
+  const parts: string[] = [];
+  for (let i = 0; i < bins.length; i++) {
+    parts.push(`${i === 0 ? "M" : "L"}${xScale(i).toFixed(2)},${yScale(bins[i]).toFixed(2)}`);
+  }
+  const linePath = parts.join(" ");
+  const areaPath =
+    `${linePath} L${xScale(bins.length - 1).toFixed(2)},${(PAD.top + plotH).toFixed(2)}` +
+    ` L${xScale(0).toFixed(2)},${(PAD.top + plotH).toFixed(2)} Z`;
+
+  const yTicks = generateTicks(0, yMax, 4);
+
+  return (
+    <svg viewBox={`0 0 ${CHART_W} ${CHART_H}`} width="100%" className="block">
+      {/* Horizontal grid lines */}
+      {yTicks.map((tick) => {
+        const y = yScale(tick);
+        if (y < PAD.top || y > PAD.top + plotH) return null;
+        return (
+          <line
+            key={`yg-${tick}`}
+            x1={PAD.left}
+            y1={y}
+            x2={CHART_W - PAD.right}
+            y2={y}
+            stroke="var(--color-border-subtle)"
+            strokeWidth="0.5"
+            strokeDasharray="4,3"
+          />
+        );
+      })}
+
+      {/* Area gradient */}
+      <defs>
+        <linearGradient id="timestep-dist-grad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="var(--color-cobalt-600)" stopOpacity="0.3" />
+          <stop offset="100%" stopColor="var(--color-cobalt-600)" stopOpacity="0.03" />
+        </linearGradient>
+      </defs>
+      <path d={areaPath} fill="url(#timestep-dist-grad)" />
+
+      {/* Distribution line */}
+      <path
+        d={linePath}
+        fill="none"
+        stroke="var(--color-cobalt-600)"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+
+      {/* Axes */}
+      <line
+        x1={PAD.left}
+        y1={PAD.top}
+        x2={PAD.left}
+        y2={PAD.top + plotH}
+        stroke="var(--color-on-surface-secondary)"
+        strokeWidth="0.5"
+        opacity="0.5"
+      />
+      <line
+        x1={PAD.left}
+        y1={PAD.top + plotH}
+        x2={CHART_W - PAD.right}
+        y2={PAD.top + plotH}
+        stroke="var(--color-on-surface-secondary)"
+        strokeWidth="0.5"
+        opacity="0.5"
+      />
+
+      {/* X labels */}
+      {X_TICKS.map((tick) => (
+        <text
+          key={`xl-${tick}`}
+          x={xScale(tick)}
+          y={CHART_H - 6}
+          textAnchor="middle"
+          fill="var(--color-on-surface-secondary)"
+          fontSize="9"
+          fontFamily="var(--font-mono)"
+        >
+          {tick}
+        </text>
+      ))}
+
+      {/* Y labels */}
+      {yTicks.map((tick) => {
+        const y = yScale(tick);
+        if (y < PAD.top || y > PAD.top + plotH) return null;
+        return (
+          <text
+            key={`yl-${tick}`}
+            x={PAD.left - 6}
+            y={y + 3}
+            textAnchor="end"
+            fill="var(--color-on-surface-secondary)"
+            fontSize="9"
+            fontFamily="var(--font-mono)"
+          >
+            {formatValue(tick)}
+          </text>
+        );
+      })}
+
+      {/* Axis title */}
+      <text
+        x={PAD.left + plotW / 2}
+        y={CHART_H}
+        textAnchor="middle"
+        fill="var(--color-on-surface-secondary)"
+        fontSize="9"
+        fontFamily="var(--font-sans)"
+      >
+        timestep
+      </text>
+    </svg>
+  );
+}
+
+/* ── Modal ─────────────────────────────────────────────────── */
+
+export interface TimestepDistModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function TimestepDistModal({ open, onClose }: TimestepDistModalProps) {
+  const [distribution] = useConfigField<TimestepDistribution>("timestep_distribution");
+  const [minNoisingStrength] = useConfigField<number>("min_noising_strength");
+  const [maxNoisingStrength] = useConfigField<number>("max_noising_strength");
+  const [noisingWeight] = useConfigField<number>("noising_weight");
+  const [noisingBias] = useConfigField<number>("noising_bias");
+  const [timestepShift] = useConfigField<number>("timestep_shift");
+
+  // Increment to force re-sampling (continuous distributions use Math.random)
+  const [seed, setSeed] = useState(0);
+
+  const bins = useMemo(() => {
+    if (
+      distribution === undefined ||
+      minNoisingStrength === undefined ||
+      maxNoisingStrength === undefined ||
+      noisingWeight === undefined ||
+      noisingBias === undefined ||
+      timestepShift === undefined
+    ) {
+      return new Float64Array(1000);
+    }
+    return computeTimestepHistogram({
+      distribution,
+      minNoisingStrength,
+      maxNoisingStrength,
+      noisingWeight,
+      noisingBias,
+      timestepShift,
+    });
+  }, [distribution, minNoisingStrength, maxNoisingStrength, noisingWeight, noisingBias, timestepShift, seed]);
+
+  const handleUpdatePreview = useCallback(() => setSeed((s) => s + 1), []);
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Timestep Distribution" size="xl">
+      <div className="flex gap-6">
+        {/* Controls */}
+        <div className="flex flex-col gap-4 min-w-[240px]">
+          <Select
+            label="Timestep Distribution"
+            configPath="timestep_distribution"
+            options={[...TimestepDistributionValues]}
+            tooltip="Selects the function to sample timesteps during training"
+          />
+          <FormEntry
+            label="Min Noising Strength"
+            configPath="min_noising_strength"
+            type="number"
+            tooltip="Specifies the minimum noising strength used during training. This can help to improve composition, but prevents finer details from being trained"
+          />
+          <FormEntry
+            label="Max Noising Strength"
+            configPath="max_noising_strength"
+            type="number"
+            tooltip="Specifies the maximum noising strength used during training. This can be useful to reduce overfitting, but also reduces the impact of training samples on the overall image composition"
+          />
+          <FormEntry
+            label="Noising Weight"
+            configPath="noising_weight"
+            type="number"
+            tooltip="Controls the weight parameter of the timestep distribution function. Use the preview to see more details."
+          />
+          <FormEntry
+            label="Noising Bias"
+            configPath="noising_bias"
+            type="number"
+            tooltip="Controls the bias parameter of the timestep distribution function. Use the preview to see more details."
+          />
+          <FormEntry
+            label="Timestep Shift"
+            configPath="timestep_shift"
+            type="number"
+            tooltip="Shift the timestep distribution. Use the preview to see more details."
+          />
+          <Toggle
+            configPath="dynamic_timestep_shifting"
+            label="Dynamic Timestep Shifting"
+            tooltip="Dynamically shift the timestep distribution based on resolution. If enabled, the shifting parameters are taken from the model's scheduler configuration and Timestep Shift is ignored. Dynamic Timestep Shifting is not shown in the preview."
+          />
+
+          <Button variant="secondary" size="sm" onClick={handleUpdatePreview}>
+            <RefreshCw className="w-3.5 h-3.5" />
+            Update Preview
+          </Button>
+        </div>
+
+        {/* Chart */}
+        <div className="flex-1 min-w-0 rounded-[var(--radius-sm)] bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] p-3 flex items-center">
+          <DistributionChart bins={bins} />
+        </div>
+      </div>
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/modals/VideoToolModal.tsx b/web/gui/src/renderer/components/modals/VideoToolModal.tsx
new file mode 100644
index 000000000..38f345472
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/VideoToolModal.tsx
@@ -0,0 +1,515 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { videoToolsApi, type VideoToolStatusResponse } from "@/api/videoToolsApi";
+import { Button, DirPicker, FilePicker, FormEntry, FormFieldWrapper, Toggle } from "@/components/shared";
+import { INPUT_FULL } from "@/utils/inputStyles";
+
+import { ModalBase } from "./ModalBase";
+
+export interface VideoToolModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+type TabId = "clips" | "images" | "download";
+
+const TAB_BASE =
+  "px-4 py-2 text-sm font-medium rounded-t-[var(--radius-sm)] border border-b-0 transition-colors duration-200 cursor-pointer";
+const TAB_ACTIVE = "bg-[var(--color-surface)] text-[var(--color-on-surface)] border-[var(--color-border-subtle)]";
+const TAB_INACTIVE =
+  "bg-transparent text-[var(--color-on-surface-secondary)] border-transparent hover:text-[var(--color-on-surface)] hover:border-[var(--color-border-subtle)]";
+
+function StatusBar({ status }: { status: VideoToolStatusResponse | null }) {
+  if (!status || status.status === "idle") return null;
+
+  const colorClass =
+    status.status === "error"
+      ? "text-[var(--color-error-500)]"
+      : status.status === "completed"
+        ? "text-[var(--color-success-500)]"
+        : "text-[var(--color-cobalt-600)]";
+
+  return (
+    <div className="mt-4 pt-3 border-t border-[var(--color-border-subtle)]">
+      <div className="flex items-center gap-2">
+        <span className={`text-sm font-medium ${colorClass}`}>
+          {status.status === "running" && "Running..."}
+          {status.status === "completed" && "Completed"}
+          {status.status === "error" && "Error"}
+        </span>
+        {status.message && (
+          <span className="text-sm text-[var(--color-on-surface-secondary)] truncate">{status.message}</span>
+        )}
+        {status.error && <span className="text-sm text-[var(--color-error-500)] truncate">{status.error}</span>}
+      </div>
+    </div>
+  );
+}
+
+function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
+  const [videoPath, setVideoPath] = useState("");
+  const [directory, setDirectory] = useState("");
+  const [outputDir, setOutputDir] = useState("");
+  const [timeStart, setTimeStart] = useState("00:00:00");
+  const [timeEnd, setTimeEnd] = useState("99:99:99");
+  const [outputSubdirectories, setOutputSubdirectories] = useState(false);
+  const [splitAtCuts, setSplitAtCuts] = useState(false);
+  const [maxLength, setMaxLength] = useState<number>(3);
+  const [fps, setFps] = useState<number>(24);
+  const [removeBorders, setRemoveBorders] = useState(false);
+  const [cropVariation, setCropVariation] = useState<number>(0.2);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleExtract = async (batchMode: boolean) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await videoToolsApi.extractClips({
+        video_path: videoPath,
+        directory,
+        batch_mode: batchMode,
+        output_dir: outputDir,
+        time_start: timeStart,
+        time_end: timeEnd,
+        output_subdirectories: outputSubdirectories,
+        split_at_cuts: splitAtCuts,
+        max_length: maxLength,
+        fps,
+        remove_borders: removeBorders,
+        crop_variation: cropVariation,
+      });
+      if (!result.ok) {
+        setError(result.error ?? "Unknown error");
+      }
+      onStatusChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <FilePicker
+            label="Single Video"
+            value={videoPath}
+            onChange={setVideoPath}
+            tooltip="Link to single video file to process."
+            filters={[
+              { name: "Video files", extensions: ["webm", "mkv", "flv", "avi", "mov", "wmv", "mp4", "mpeg", "m4v"] },
+            ]}
+          />
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => handleExtract(false)} loading={loading} disabled={loading}>
+          Extract Single
+        </Button>
+      </div>
+
+      <FormFieldWrapper
+        label="Time Range"
+        tooltip="Time range to limit selection for single video. Format: HH:MM:SS, MM:SS, or seconds."
+      >
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={timeStart}
+            onChange={(e) => setTimeStart(e.target.value)}
+            className={INPUT_FULL}
+            placeholder="00:00:00"
+          />
+          <input
+            type="text"
+            value={timeEnd}
+            onChange={(e) => setTimeEnd(e.target.value)}
+            className={INPUT_FULL}
+            placeholder="99:99:99"
+          />
+        </div>
+      </FormFieldWrapper>
+
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <DirPicker
+            label="Directory"
+            value={directory}
+            onChange={setDirectory}
+            tooltip="Path to directory with multiple videos to process, including in subdirectories."
+          />
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => handleExtract(true)} loading={loading} disabled={loading}>
+          Extract Directory
+        </Button>
+      </div>
+
+      <DirPicker
+        label="Output"
+        value={outputDir}
+        onChange={setOutputDir}
+        tooltip="Path to folder where extracted clips will be saved."
+      />
+
+      <div className="grid grid-cols-2 gap-4">
+        <Toggle
+          label="Output to Subdirectories"
+          value={outputSubdirectories}
+          onChange={setOutputSubdirectories}
+          tooltip="If enabled, files are saved to subfolders based on filename and input directory."
+        />
+        <Toggle
+          label="Split at Cuts"
+          value={splitAtCuts}
+          onChange={setSplitAtCuts}
+          tooltip="If enabled, detect cuts in the input video and split at those points."
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <FormEntry
+          label="Max Length (s)"
+          value={maxLength}
+          onChange={(v) => setMaxLength(Number(v))}
+          type="number"
+          tooltip="Maximum length in seconds for saved clips. Larger clips will be broken into multiple small clips."
+        />
+        <FormEntry
+          label="Set FPS"
+          value={fps}
+          onChange={(v) => setFps(Number(v))}
+          type="number"
+          tooltip="FPS to convert output videos to. Set to 0 to keep original rate."
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Toggle
+          label="Remove Borders"
+          value={removeBorders}
+          onChange={setRemoveBorders}
+          tooltip="Remove black borders from output clip."
+        />
+        <FormEntry
+          label="Crop Variation"
+          value={cropVariation}
+          onChange={(v) => setCropVariation(Number(v))}
+          type="number"
+          tooltip="Output clips will be randomly cropped to +/- the base aspect ratio. Set to 0 to use only base aspect."
+        />
+      </div>
+
+      {error && <p className="text-sm text-[var(--color-error-500)]">{error}</p>}
+    </div>
+  );
+}
+
+function ExtractImagesTab({ onStatusChange }: { onStatusChange: () => void }) {
+  const [videoPath, setVideoPath] = useState("");
+  const [directory, setDirectory] = useState("");
+  const [outputDir, setOutputDir] = useState("");
+  const [timeStart, setTimeStart] = useState("00:00:00");
+  const [timeEnd, setTimeEnd] = useState("99:99:99");
+  const [outputSubdirectories, setOutputSubdirectories] = useState(false);
+  const [imagesPerSecond, setImagesPerSecond] = useState<number>(0.5);
+  const [blurRemoval, setBlurRemoval] = useState<number>(0.2);
+  const [removeBorders, setRemoveBorders] = useState(false);
+  const [cropVariation, setCropVariation] = useState<number>(0.2);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleExtract = async (batchMode: boolean) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await videoToolsApi.extractImages({
+        video_path: videoPath,
+        directory,
+        batch_mode: batchMode,
+        output_dir: outputDir,
+        time_start: timeStart,
+        time_end: timeEnd,
+        output_subdirectories: outputSubdirectories,
+        images_per_second: imagesPerSecond,
+        blur_removal: blurRemoval,
+        remove_borders: removeBorders,
+        crop_variation: cropVariation,
+      });
+      if (!result.ok) {
+        setError(result.error ?? "Unknown error");
+      }
+      onStatusChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <FilePicker
+            label="Single Video"
+            value={videoPath}
+            onChange={setVideoPath}
+            tooltip="Link to single video file to process."
+            filters={[
+              { name: "Video files", extensions: ["webm", "mkv", "flv", "avi", "mov", "wmv", "mp4", "mpeg", "m4v"] },
+            ]}
+          />
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => handleExtract(false)} loading={loading} disabled={loading}>
+          Extract Single
+        </Button>
+      </div>
+
+      <FormFieldWrapper
+        label="Time Range"
+        tooltip="Time range to limit selection for single video. Format: HH:MM:SS, MM:SS, or seconds."
+      >
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={timeStart}
+            onChange={(e) => setTimeStart(e.target.value)}
+            className={INPUT_FULL}
+            placeholder="00:00:00"
+          />
+          <input
+            type="text"
+            value={timeEnd}
+            onChange={(e) => setTimeEnd(e.target.value)}
+            className={INPUT_FULL}
+            placeholder="99:99:99"
+          />
+        </div>
+      </FormFieldWrapper>
+
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <DirPicker
+            label="Directory"
+            value={directory}
+            onChange={setDirectory}
+            tooltip="Path to directory with multiple videos to process, including in subdirectories."
+          />
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => handleExtract(true)} loading={loading} disabled={loading}>
+          Extract Directory
+        </Button>
+      </div>
+
+      <DirPicker
+        label="Output"
+        value={outputDir}
+        onChange={setOutputDir}
+        tooltip="Path to folder where extracted images will be saved."
+      />
+
+      <Toggle
+        label="Output to Subdirectories"
+        value={outputSubdirectories}
+        onChange={setOutputSubdirectories}
+        tooltip="If enabled, files are saved to subfolders based on filename and input directory."
+      />
+
+      <div className="grid grid-cols-2 gap-4">
+        <FormEntry
+          label="Images/sec"
+          value={imagesPerSecond}
+          onChange={(v) => setImagesPerSecond(Number(v))}
+          type="number"
+          tooltip="Number of images to capture per second of video. Images will be taken at semi-random frames around the specified frequency."
+        />
+        <FormEntry
+          label="Blur Removal"
+          value={blurRemoval}
+          onChange={(v) => setBlurRemoval(Number(v))}
+          type="number"
+          tooltip="Threshold for removal of blurry images, relative to all others. At 0.2, the blurriest 20% of frames will not be saved."
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Toggle
+          label="Remove Borders"
+          value={removeBorders}
+          onChange={setRemoveBorders}
+          tooltip="Remove black borders from output image."
+        />
+        <FormEntry
+          label="Crop Variation"
+          value={cropVariation}
+          onChange={(v) => setCropVariation(Number(v))}
+          type="number"
+          tooltip="Output images will be randomly cropped to +/- the base aspect ratio. Set to 0 to use only base aspect."
+        />
+      </div>
+
+      {error && <p className="text-sm text-[var(--color-error-500)]">{error}</p>}
+    </div>
+  );
+}
+
+function DownloadTab({ onStatusChange }: { onStatusChange: () => void }) {
+  const [url, setUrl] = useState("");
+  const [linkListPath, setLinkListPath] = useState("");
+  const [outputDir, setOutputDir] = useState("");
+  const [additionalArgs, setAdditionalArgs] = useState("--quiet --no-warnings --progress");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleDownload = async (batchMode: boolean) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await videoToolsApi.download({
+        url,
+        link_list_path: linkListPath,
+        batch_mode: batchMode,
+        output_dir: outputDir,
+        additional_args: additionalArgs,
+      });
+      if (!result.ok) {
+        setError(result.error ?? "Unknown error");
+      }
+      onStatusChange();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <FormEntry
+            label="Single Link"
+            value={url}
+            onChange={(v) => setUrl(String(v))}
+            type="text"
+            tooltip="Link to video/playlist to download. Uses yt-dlp; supports YouTube, Twitch, Instagram, and many other sites."
+            placeholder="https://..."
+          />
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => handleDownload(false)}
+          loading={loading}
+          disabled={loading}
+        >
+          Download Link
+        </Button>
+      </div>
+
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <FilePicker
+            label="Link List"
+            value={linkListPath}
+            onChange={setLinkListPath}
+            tooltip="Path to .txt file with list of links separated by newlines."
+            filters={[{ name: "Text file", extensions: ["txt"] }]}
+          />
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => handleDownload(true)} loading={loading} disabled={loading}>
+          Download List
+        </Button>
+      </div>
+
+      <DirPicker
+        label="Output"
+        value={outputDir}
+        onChange={setOutputDir}
+        tooltip="Path to folder where downloaded videos will be saved."
+      />
+
+      <FormFieldWrapper
+        label="Additional Args"
+        tooltip="Any additional arguments to pass to yt-dlp, for example '--restrict-filenames --force-overwrite'. Default args will hide most terminal outputs."
+      >
+        <textarea
+          value={additionalArgs}
+          onChange={(e) => setAdditionalArgs(e.target.value)}
+          rows={3}
+          className="px-3 py-2 rounded-[var(--radius-sm)] text-sm bg-[var(--color-input-bg)] border border-[var(--color-border-subtle)] text-[var(--color-on-surface)] focus:outline-none focus:border-[var(--color-cobalt-600)] focus:shadow-[var(--shadow-inset-focus)] resize-y w-full transition-[border-color,box-shadow,background-color] duration-200 ease-out"
+        />
+      </FormFieldWrapper>
+
+      <div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => window.open("https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#usage-and-options", "_blank")}
+        >
+          yt-dlp info
+        </Button>
+      </div>
+
+      {error && <p className="text-sm text-[var(--color-error-500)]">{error}</p>}
+    </div>
+  );
+}
+
+export function VideoToolModal({ open, onClose }: VideoToolModalProps) {
+  const [activeTab, setActiveTab] = useState<TabId>("clips");
+  const [status, setStatus] = useState<VideoToolStatusResponse | null>(null);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const s = await videoToolsApi.getStatus();
+      setStatus(s);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    fetchStatus();
+    const interval = setInterval(() => {
+      fetchStatus();
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [open, fetchStatus]);
+
+  const tabs: Array<{ id: TabId; label: string }> = [
+    { id: "clips", label: "Extract Clips" },
+    { id: "images", label: "Extract Images" },
+    { id: "download", label: "Download" },
+  ];
+
+  return (
+    <ModalBase open={open} onClose={onClose} title="Video Tools" size="lg">
+      <div className="flex gap-1 mb-4 border-b border-[var(--color-border-subtle)]">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`${TAB_BASE} ${activeTab === tab.id ? TAB_ACTIVE : TAB_INACTIVE}`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "clips" && <ExtractClipsTab onStatusChange={fetchStatus} />}
+      {activeTab === "images" && <ExtractImagesTab onStatusChange={fetchStatus} />}
+      {activeTab === "download" && <DownloadTab onStatusChange={fetchStatus} />}
+
+      <StatusBar status={status} />
+
+      <div className="flex justify-end mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+        <Button variant="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/sampling/SampleCard.tsx b/web/gui/src/renderer/components/sampling/SampleCard.tsx
new file mode 100644
index 000000000..d16d8983c
--- /dev/null
+++ b/web/gui/src/renderer/components/sampling/SampleCard.tsx
@@ -0,0 +1,53 @@
+import { Pencil } from "lucide-react";
+
+import { ArrayItemHeader, Toggle } from "@/components/shared";
+import type { SampleConfig } from "@/types/generated/config";
+
+export interface SampleCardProps {
+  sample: SampleConfig;
+  index: number;
+  onOpen: (index: number) => void;
+  onClone: (index: number) => void;
+  onRemove: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+}
+
+export function SampleCard({ sample, index, onOpen, onClone, onRemove, onToggle }: SampleCardProps) {
+  const promptPreview = sample.prompt?.trim() ? (
+    sample.prompt.length > 80 ? (
+      `${sample.prompt.slice(0, 80)}…`
+    ) : (
+      sample.prompt
+    )
+  ) : (
+    <span className="italic opacity-60">(no prompt)</span>
+  );
+
+  return (
+    <div className="rounded-[var(--radius-md)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] p-3">
+      <ArrayItemHeader title={`Sample ${index + 1}`} onClone={() => onClone(index)} onRemove={() => onRemove(index)}>
+        <Toggle value={sample.enabled} onChange={(v) => onToggle(index, v)} />
+      </ArrayItemHeader>
+
+      <div className="text-sm text-[var(--color-on-surface)] mb-2 break-words">{promptPreview}</div>
+      {sample.negative_prompt?.trim() && (
+        <div className="text-xs text-[var(--color-on-surface-secondary)] mb-2 break-words">
+          neg: {sample.negative_prompt.length > 60 ? `${sample.negative_prompt.slice(0, 60)}…` : sample.negative_prompt}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between text-xs text-[var(--color-on-surface-secondary)]">
+        <span>
+          {sample.width}×{sample.height} · seed {sample.random_seed ? "random" : sample.seed} · cfg {sample.cfg_scale} ·{" "}
+          {sample.diffusion_steps} steps
+        </span>
+        <button
+          onClick={() => onOpen(index)}
+          className="flex items-center gap-1 text-[var(--color-cobalt-600)] hover:underline cursor-pointer"
+        >
+          <Pencil className="w-3.5 h-3.5" /> Edit
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/sampling/SampleList.tsx b/web/gui/src/renderer/components/sampling/SampleList.tsx
new file mode 100644
index 000000000..a22b48589
--- /dev/null
+++ b/web/gui/src/renderer/components/sampling/SampleList.tsx
@@ -0,0 +1,48 @@
+import { Plus } from "lucide-react";
+
+import { Button, EmptyState } from "@/components/shared";
+import type { SampleConfig } from "@/types/generated/config";
+
+import { SampleCard } from "./SampleCard";
+
+export interface SampleListProps {
+  samples: SampleConfig[];
+  onAdd: () => void;
+  onOpen: (index: number) => void;
+  onClone: (index: number) => void;
+  onRemove: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+}
+
+export function SampleList({ samples, onAdd, onOpen, onClone, onRemove, onToggle }: SampleListProps) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <Button variant="primary" size="sm" onClick={onAdd}>
+          <Plus className="w-4 h-4" /> Add Sample
+        </Button>
+        <span className="text-xs text-[var(--color-on-surface-secondary)] ml-auto">
+          {samples.length} sample{samples.length === 1 ? "" : "s"}
+        </span>
+      </div>
+
+      {samples.length === 0 ? (
+        <EmptyState title="No samples yet" description="Add a sample to generate previews during training." />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {samples.map((sample, idx) => (
+            <SampleCard
+              key={idx}
+              sample={sample}
+              index={idx}
+              onOpen={onOpen}
+              onClone={onClone}
+              onRemove={onRemove}
+              onToggle={onToggle}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/schema/SchemaModal.tsx b/web/gui/src/renderer/components/schema/SchemaModal.tsx
new file mode 100644
index 000000000..81e8bb558
--- /dev/null
+++ b/web/gui/src/renderer/components/schema/SchemaModal.tsx
@@ -0,0 +1,54 @@
+import { ModalBase } from "@/components/modals/ModalBase";
+import { SchemaField } from "@/components/shared";
+import { SectionCard } from "@/components/shared";
+import type { ModalDef } from "@/types/uiSchema";
+import { evaluateCondition } from "@/utils/conditionEval";
+
+interface SchemaModalProps {
+  open: boolean;
+  onClose: () => void;
+  modal: ModalDef;
+  configRecord: Record<string, unknown>;
+  predicates: Record<string, string[]>;
+}
+
+/**
+ * Generic modal renderer: renders modal sections/fields from a schema ModalDef.
+ * Used for simple modals that are just collections of fields (Timestep, Offloading, etc.).
+ * Complex modals (Optimizer, Scheduler) use custom renderers instead.
+ */
+export function SchemaModal({ open, onClose, modal, configRecord, predicates }: SchemaModalProps) {
+  if (!modal.sections || modal.sections.length === 0) return null;
+
+  return (
+    <ModalBase open={open} onClose={onClose} title={modal.title}>
+      <div className="flex flex-col gap-6">
+        {modal.sections.map((section) => {
+          const visibleFields = section.fields.filter((f) => evaluateCondition(f.visibility, configRecord, predicates));
+          if (visibleFields.length === 0) return null;
+
+          // If section has a label, wrap in SectionCard; otherwise render flat
+          if (section.label) {
+            return (
+              <SectionCard key={section.id} title={section.label}>
+                <div className="flex flex-col gap-4">
+                  {visibleFields.map((field) => (
+                    <SchemaField key={field.key} field={field} />
+                  ))}
+                </div>
+              </SectionCard>
+            );
+          }
+
+          return (
+            <div key={section.id} className="flex flex-col gap-4">
+              {visibleFields.map((field) => (
+                <SchemaField key={field.key} field={field} />
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </ModalBase>
+  );
+}
diff --git a/web/gui/src/renderer/components/schema/SchemaTabRenderer.tsx b/web/gui/src/renderer/components/schema/SchemaTabRenderer.tsx
new file mode 100644
index 000000000..2db1fbd8e
--- /dev/null
+++ b/web/gui/src/renderer/components/schema/SchemaTabRenderer.tsx
@@ -0,0 +1,192 @@
+import { useCallback, useMemo, useState } from "react";
+import { lazy, Suspense } from "react";
+
+import { SchemaField, SectionCard } from "@/components/shared";
+import { useConfigStore } from "@/store/configStore";
+import { useUiSchemaStore } from "@/store/uiSchemaStore";
+import type { LossWeight, ModelType } from "@/types/generated/enums";
+import { LOSS_WEIGHT_SUPPORTS_FLOW_MATCHING } from "@/types/generated/lossWeightInfo";
+import { MODEL_TYPE_GROUPS } from "@/types/generated/modelTypeInfo";
+import type { FieldDef, SectionDef, TabDef } from "@/types/uiSchema";
+import { evaluateCondition } from "@/utils/conditionEval";
+
+import { SchemaModal } from "./SchemaModal";
+
+const OptimizerParamsModal = lazy(() =>
+  import("@/components/modals/OptimizerParamsModal").then((m) => ({ default: m.OptimizerParamsModal })),
+);
+const SchedulerParamsModal = lazy(() =>
+  import("@/components/modals/SchedulerParamsModal").then((m) => ({ default: m.SchedulerParamsModal })),
+);
+const TimestepDistModal = lazy(() =>
+  import("@/components/modals/TimestepDistModal").then((m) => ({ default: m.TimestepDistModal })),
+);
+const OffloadingModal = lazy(() =>
+  import("@/components/modals/OffloadingModal").then((m) => ({ default: m.OffloadingModal })),
+);
+
+const CUSTOM_MODAL_RENDERERS: Record<
+  string,
+  React.LazyExoticComponent<React.ComponentType<{ open: boolean; onClose: () => void }>>
+> = {
+  "optimizer-params": OptimizerParamsModal,
+  "scheduler-params": SchedulerParamsModal,
+  "timestep-dist": TimestepDistModal,
+  offloading: OffloadingModal,
+};
+
+interface SchemaTabRendererProps {
+  tab: TabDef;
+}
+
+export function SchemaTabRenderer({ tab }: SchemaTabRendererProps) {
+  const schema = useUiSchemaStore((s) => s.schema);
+  const config = useConfigStore((s) => s.config);
+  const [activeModal, setActiveModal] = useState<string | null>(null);
+
+  const predicates = useMemo(() => schema?.predicates ?? {}, [schema]);
+  const configRecord = useMemo(() => (config ?? {}) as Record<string, unknown>, [config]);
+
+  const resolvedSections = useMemo(() => {
+    const defs = tab.sectionDefs ?? {};
+
+    if (tab.variants && tab.variants.length > 0 && tab.sectionDefs) {
+      let matchedVariant = tab.variants[0];
+      for (const variant of tab.variants) {
+        if (evaluateCondition(variant.when, configRecord, predicates)) {
+          matchedVariant = variant;
+          break;
+        }
+      }
+
+      if (tab.layout === "three-column") {
+        return matchedVariant.columns.map((col) => col.sections.map((sectionId) => defs[sectionId]).filter(Boolean));
+      }
+      const allSections = matchedVariant.columns.flatMap((col) =>
+        col.sections.map((sectionId) => defs[sectionId]).filter(Boolean),
+      );
+      return [allSections];
+    }
+
+    return tab.sections ? [tab.sections] : [];
+  }, [tab, configRecord, predicates]);
+
+  const resolveEnumOptions = useCallback(
+    (field: FieldDef): string[] => {
+      if (field.enumRef && schema?.enums[field.enumRef]) {
+        const values = schema.enums[field.enumRef].values;
+        if (field.key === "loss_weight_fn") {
+          const modelType = configRecord["model_type"] as ModelType | undefined;
+          if (modelType) {
+            const flowMatching = MODEL_TYPE_GROUPS.is_flow_matching ?? [];
+            const isFlowMatching = flowMatching.includes(modelType);
+            return values.filter(
+              (v) => v === "CONSTANT" || LOSS_WEIGHT_SUPPORTS_FLOW_MATCHING[v as LossWeight] === isFlowMatching,
+            );
+          }
+        }
+        return values;
+      }
+      return [];
+    },
+    [schema, configRecord],
+  );
+
+  const resolveKvOptions = useCallback(
+    (field: FieldDef): Array<{ label: string; value: string }> | undefined => {
+      if (field.dtypeSubset && schema?.dtypeSubsets[field.dtypeSubset]) {
+        return schema.dtypeSubsets[field.dtypeSubset];
+      }
+      return field.options;
+    },
+    [schema],
+  );
+
+  const handleAdvancedClick = useCallback(
+    (fieldKey: string) => {
+      // Walk resolved sections to find the field and its modal ref
+      for (const group of resolvedSections) {
+        for (const section of group) {
+          for (const field of section.fields) {
+            if (field.key === fieldKey && field.modal) {
+              setActiveModal(field.modal);
+              return;
+            }
+          }
+        }
+      }
+    },
+    [resolvedSections],
+  );
+
+  const closeModal = useCallback(() => setActiveModal(null), []);
+
+  const visibleFields = useCallback(
+    (fields: FieldDef[]) => fields.filter((f) => evaluateCondition(f.visibility, configRecord, predicates)),
+    [configRecord, predicates],
+  );
+
+  const isSectionVisible = useCallback(
+    (section: SectionDef) => evaluateCondition(section.visibility, configRecord, predicates),
+    [configRecord, predicates],
+  );
+
+  const renderSection = (section: SectionDef) => {
+    if (!isSectionVisible(section)) return null;
+    const fields = visibleFields(section.fields);
+    if (fields.length === 0) return null;
+
+    return (
+      <SectionCard key={section.id} title={section.label}>
+        <div
+          className={tab.layout === "three-column" ? "flex flex-col gap-4" : "grid grid-cols-1 md:grid-cols-2 gap-4"}
+        >
+          {fields.map((field) => (
+            <SchemaField
+              key={field.key}
+              field={field}
+              onAdvancedClick={handleAdvancedClick}
+              resolveOptions={resolveEnumOptions}
+              resolveKvOptions={resolveKvOptions}
+            />
+          ))}
+        </div>
+      </SectionCard>
+    );
+  };
+
+  const activeModalDef = activeModal ? schema?.modals[activeModal] : undefined;
+  const CustomModalComponent = activeModal ? CUSTOM_MODAL_RENDERERS[activeModalDef?.renderer ?? ""] : undefined;
+
+  return (
+    <>
+      {tab.layout === "three-column" ? (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {resolvedSections.map((column, colIdx) => (
+            <div key={colIdx} className="flex flex-col gap-6">
+              {column.map((section) => renderSection(section))}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-6">{resolvedSections.flat().map((section) => renderSection(section))}</div>
+      )}
+
+      {CustomModalComponent && (
+        <Suspense fallback={null}>
+          <CustomModalComponent open={!!activeModal} onClose={closeModal} />
+        </Suspense>
+      )}
+
+      {activeModalDef && !activeModalDef.renderer && (
+        <SchemaModal
+          open={!!activeModal}
+          onClose={closeModal}
+          modal={activeModalDef}
+          configRecord={configRecord}
+          predicates={predicates}
+        />
+      )}
+    </>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/ArrayItemHeader.tsx b/web/gui/src/renderer/components/shared/ArrayItemHeader.tsx
new file mode 100644
index 000000000..4aa10adf7
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/ArrayItemHeader.tsx
@@ -0,0 +1,39 @@
+import { Copy, X } from "lucide-react";
+import { type ReactNode } from "react";
+
+import { IconButton } from "./IconButton";
+
+export interface ArrayItemHeaderProps {
+  title: string;
+  onClone: () => void;
+  onRemove: () => void;
+  /** Optional content before the title (e.g. an inline Toggle). */
+  children?: ReactNode;
+}
+
+export function ArrayItemHeader({ title, onClone, onRemove, children }: ArrayItemHeaderProps) {
+  return (
+    <div className="flex justify-between items-start mb-4">
+      <div className="flex items-center gap-3">
+        {children}
+        <h4 className="text-sm font-medium text-[var(--color-on-surface)]">{title}</h4>
+      </div>
+      <div className="flex gap-1">
+        <IconButton
+          icon={<Copy className="w-full h-full" />}
+          label="Clone"
+          variant="ghost"
+          size="sm"
+          onClick={onClone}
+        />
+        <IconButton
+          icon={<X className="w-full h-full" />}
+          label="Remove"
+          variant="danger"
+          size="sm"
+          onClick={onRemove}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/Button.tsx b/web/gui/src/renderer/components/shared/Button.tsx
new file mode 100644
index 000000000..dec770eeb
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/Button.tsx
@@ -0,0 +1,50 @@
+import { Loader2 } from "lucide-react";
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+  children: ReactNode;
+}
+
+const variantClasses: Record<string, string> = {
+  primary: "text-white border-none",
+  secondary: "bg-transparent border border-[var(--color-border-subtle)] text-[var(--color-on-surface)]",
+  danger: "bg-[var(--color-error-500)] text-white border-none",
+  ghost: "bg-transparent border-none text-[var(--color-on-surface-secondary)]",
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: "py-1 px-3 text-sm",
+  md: "py-2 px-4 text-base",
+  lg: "py-3 px-6 text-base",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", loading, disabled, children, className = "", style, ...props }, ref) => {
+    const isPrimary = variant === "primary";
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={`inline-flex items-center justify-center gap-2 font-semibold rounded-[var(--radius-sm)] cursor-pointer
+          transition-all duration-200 ease-out
+          hover:not-disabled:scale-103
+          disabled:opacity-50 disabled:cursor-not-allowed
+          ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+        style={{
+          ...(isPrimary
+            ? { background: "linear-gradient(135deg, var(--color-cobalt-600), var(--color-azure-500))" }
+            : {}),
+          ...style,
+        }}
+        {...props}
+      >
+        {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+        {children}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
diff --git a/web/gui/src/renderer/components/shared/Card.tsx b/web/gui/src/renderer/components/shared/Card.tsx
new file mode 100644
index 000000000..02c1bbf3a
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/Card.tsx
@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+
+export interface CardProps {
+  children: ReactNode;
+  className?: string;
+  hoverable?: boolean;
+  padding?: "none" | "sm" | "md" | "lg";
+}
+
+const paddingClasses = { none: "", sm: "p-4", md: "p-5", lg: "p-8" };
+
+export function Card({ children, className = "", hoverable = true, padding = "md" }: CardProps) {
+  return (
+    <div className={`card ${paddingClasses[padding]} ${hoverable ? "" : "card-static"} ${className}`}>{children}</div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/DirPicker.tsx b/web/gui/src/renderer/components/shared/DirPicker.tsx
new file mode 100644
index 000000000..9c5fb88b7
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/DirPicker.tsx
@@ -0,0 +1,7 @@
+import { PathPicker, type PathPickerProps } from "./PathPicker";
+
+export type DirPickerProps = Omit<PathPickerProps, "mode" | "filters">;
+
+export function DirPicker(props: DirPickerProps) {
+  return <PathPicker mode="directory" {...props} />;
+}
diff --git a/web/gui/src/renderer/components/shared/DualProgress.tsx b/web/gui/src/renderer/components/shared/DualProgress.tsx
new file mode 100644
index 000000000..6a59279d4
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/DualProgress.tsx
@@ -0,0 +1,28 @@
+import { ProgressBar } from "./ProgressBar";
+
+export interface DualProgressProps {
+  epochProgress: number;
+  stepProgress: number;
+  epochLabel?: string;
+  stepLabel?: string;
+}
+
+export function DualProgress({
+  epochProgress,
+  stepProgress,
+  epochLabel = "Epoch",
+  stepLabel = "Step",
+}: DualProgressProps) {
+  return (
+    <div className="flex flex-col gap-2 min-w-[200px]">
+      <div className="flex flex-col gap-0.5">
+        <span className="text-xs font-medium text-[var(--color-on-surface)] tabular-nums">{epochLabel}</span>
+        <ProgressBar value={epochProgress} />
+      </div>
+      <div className="flex flex-col gap-0.5">
+        <span className="text-xs font-medium text-[var(--color-on-surface)] tabular-nums">{stepLabel}</span>
+        <ProgressBar value={stepProgress} />
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/EmptyState.tsx b/web/gui/src/renderer/components/shared/EmptyState.tsx
new file mode 100644
index 000000000..23ad2e16c
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/EmptyState.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { Button } from "./Button";
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 animate-[rowFade_0.3s_ease-out]">
+      {icon && (
+        <div className="text-[var(--color-on-surface-secondary)] opacity-30 mb-4 [&>svg]:w-12 [&>svg]:h-12">{icon}</div>
+      )}
+      <h3 className="text-lg font-medium text-[var(--color-on-surface)]">{title}</h3>
+      {description && <p className="mt-1 text-sm text-[var(--color-on-surface-secondary)]">{description}</p>}
+      {action && (
+        <div className="mt-5">
+          <Button variant="primary" size="sm" onClick={action.onClick}>
+            {action.label}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/FilePicker.tsx b/web/gui/src/renderer/components/shared/FilePicker.tsx
new file mode 100644
index 000000000..fb50f4bd8
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/FilePicker.tsx
@@ -0,0 +1,7 @@
+import { PathPicker, type PathPickerProps } from "./PathPicker";
+
+export type FilePickerProps = Omit<PathPickerProps, "mode">;
+
+export function FilePicker(props: FilePickerProps) {
+  return <PathPicker mode="file" {...props} />;
+}
diff --git a/web/gui/src/renderer/components/shared/FormEntry.tsx b/web/gui/src/renderer/components/shared/FormEntry.tsx
new file mode 100644
index 000000000..961fa390d
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/FormEntry.tsx
@@ -0,0 +1,103 @@
+import { type ChangeEvent, forwardRef, useEffect, useRef, useState } from "react";
+
+import { useConfigField } from "@/hooks/useConfigField";
+import { INPUT_FULL, PLACEHOLDER } from "@/utils/inputStyles";
+
+import { FormFieldWrapper } from "./FormFieldWrapper";
+
+export interface FormEntryProps {
+  label: string;
+  configPath?: string;
+  value?: string | number | null;
+  onChange?: (value: string | number) => void;
+  type?: "text" | "number";
+  placeholder?: string;
+  tooltip?: string;
+  disabled?: boolean;
+  nullable?: boolean;
+  width?: string;
+}
+
+export const FormEntry = forwardRef<HTMLInputElement, FormEntryProps>(
+  (
+    {
+      label,
+      configPath,
+      value: controlledValue,
+      onChange,
+      type = "text",
+      placeholder,
+      tooltip,
+      disabled,
+      nullable,
+      width,
+    },
+    ref,
+  ) => {
+    const [configValue, setConfigValue] = useConfigField<string | number | null>(configPath);
+
+    const externalValue = configPath ? configValue : controlledValue;
+    const [localValue, setLocalValue] = useState<string>(externalValue != null ? String(externalValue) : "");
+    const isFocusedRef = useRef(false);
+
+    useEffect(() => {
+      // Don't clobber what the user is actively typing. Pushing a parsed number
+      // to the config makes it flow back here as `externalValue`; re-syncing
+      // mid-type would rewrite the raw text (e.g. "-0" -> "0", "1e-4" -> "0.0001").
+      // External-driven updates (preset load, reset, config switch) still apply
+      // when the field isn't focused.
+      if (isFocusedRef.current) return;
+      setLocalValue(externalValue != null ? String(externalValue) : "");
+    }, [externalValue]);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value;
+      setLocalValue(raw);
+      if (raw === "" && nullable) {
+        if (configPath && setConfigValue) setConfigValue(null as unknown as string | number);
+        return;
+      }
+      if (type === "number") {
+        // Don't push an empty field as 0 — let the user keep typing.
+        // The config will be updated once a valid number is entered.
+        if (raw === "" || raw === "-") return;
+        const num = Number(raw);
+        if (isNaN(num)) return;
+        if (configPath && setConfigValue) setConfigValue(num);
+        if (onChange) onChange(num);
+      } else {
+        if (configPath && setConfigValue) setConfigValue(raw);
+        if (onChange) onChange(raw);
+      }
+    };
+
+    const handleFocus = () => {
+      isFocusedRef.current = true;
+    };
+
+    const handleBlur = () => {
+      isFocusedRef.current = false;
+      // Validate/normalize on blur: snap the display to the canonical stored
+      // value (e.g. "007" -> "7", "5." -> "5"). Incomplete entries like "-" or
+      // "" that were never pushed simply revert to the last valid value.
+      setLocalValue(externalValue != null ? String(externalValue) : "");
+    };
+
+    return (
+      <FormFieldWrapper label={label} tooltip={tooltip} configPath={configPath} style={width ? { width } : undefined}>
+        <input
+          ref={ref}
+          type={type}
+          value={localValue}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={`${INPUT_FULL} ${PLACEHOLDER}`}
+        />
+      </FormFieldWrapper>
+    );
+  },
+);
+FormEntry.displayName = "FormEntry";
diff --git a/web/gui/src/renderer/components/shared/FormFieldWrapper.tsx b/web/gui/src/renderer/components/shared/FormFieldWrapper.tsx
new file mode 100644
index 000000000..382a7c5e6
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/FormFieldWrapper.tsx
@@ -0,0 +1,53 @@
+import { Info } from "lucide-react";
+import { type CSSProperties, type ReactNode } from "react";
+
+import { getTooltip } from "@/utils/tooltips";
+
+import { Tooltip } from "./Tooltip";
+
+export interface FormFieldWrapperProps {
+  label?: string;
+  tooltip?: string;
+  configPath?: string;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+export function FormFieldWrapper({ label, tooltip, configPath, className, style, children }: FormFieldWrapperProps) {
+  const resolvedTooltip = tooltip ?? (configPath ? getTooltip(configPath) : undefined);
+
+  const wrapperClass =
+    className ??
+    (label
+      ? "flex flex-col gap-1.5 pl-3 border-l-2 border-transparent hover:border-[color-mix(in_srgb,var(--color-cobalt-600)_20%,transparent)] transition-[border-color] duration-300"
+      : "flex flex-col gap-1");
+
+  // Uses <div> rather than <label>: a <label> containing an <input> and a
+  // <button> forwards any click inside it to the first labelable descendant
+  // (the input), which on Electron/Chromium can swallow the button's onClick
+  // and left PathPicker's browse button dead. The label text is still
+  // readable and the tooltip still reachable; the (minor) loss is that
+  // clicking the label text no longer focuses the input.
+  if (!label) {
+    return (
+      <div className={wrapperClass} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className={wrapperClass} style={style}>
+      <div className="flex items-center gap-1">
+        <span className="text-sm font-medium text-[var(--color-on-surface)]">{label}</span>
+        {resolvedTooltip && (
+          <Tooltip content={resolvedTooltip}>
+            <Info className="w-4 h-4 text-[var(--color-on-surface-secondary)] hover:text-[var(--color-cobalt-600)] transition-colors duration-200 cursor-help" />
+          </Tooltip>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/IconButton.tsx b/web/gui/src/renderer/components/shared/IconButton.tsx
new file mode 100644
index 000000000..713a94886
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/IconButton.tsx
@@ -0,0 +1,44 @@
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from "react";
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  label: string;
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeMap = { sm: "w-7 h-7", md: "w-9 h-9", lg: "w-11 h-11" };
+const iconSizeMap = { sm: "w-3.5 h-3.5", md: "w-4 h-4", lg: "w-5 h-5" };
+
+const variantClasses: Record<string, string> = {
+  primary: "text-white",
+  secondary: "bg-transparent border border-[var(--color-border-subtle)] text-[var(--color-on-surface)]",
+  danger: "bg-[var(--color-error-500)] text-white",
+  ghost: "bg-transparent text-[var(--color-on-surface-secondary)] hover:text-[var(--color-on-surface)]",
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, label, variant = "ghost", size = "md", className = "", style, ...props }, ref) => {
+    const isPrimary = variant === "primary";
+    return (
+      <button
+        ref={ref}
+        aria-label={label}
+        className={`inline-flex items-center justify-center rounded-[var(--radius-sm)] cursor-pointer
+          transition-all duration-200 ease-out hover:not-disabled:scale-103
+          disabled:opacity-50 disabled:cursor-not-allowed
+          ${sizeMap[size]} ${variantClasses[variant]} ${className}`}
+        style={{
+          ...(isPrimary
+            ? { background: "linear-gradient(135deg, var(--color-cobalt-600), var(--color-azure-500))" }
+            : {}),
+          ...style,
+        }}
+        {...props}
+      >
+        <span className={iconSizeMap[size]}>{icon}</span>
+      </button>
+    );
+  },
+);
+IconButton.displayName = "IconButton";
diff --git a/web/gui/src/renderer/components/shared/LayerFilterEntry.tsx b/web/gui/src/renderer/components/shared/LayerFilterEntry.tsx
new file mode 100644
index 000000000..056b08260
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/LayerFilterEntry.tsx
@@ -0,0 +1,83 @@
+import { type ChangeEvent, useEffect, useState } from "react";
+
+import { useConfigField } from "@/hooks/useConfigField";
+import { EMPTY_PRESETS, LAYER_PRESETS_BY_MODEL, type LayerPresetMap } from "@/types/generated/layerPresets";
+import { INPUT_FULL, PLACEHOLDER, SELECT_BASE } from "@/utils/inputStyles";
+
+import { FormFieldWrapper } from "./FormFieldWrapper";
+import { Toggle } from "./Toggle";
+
+export interface LayerFilterEntryProps {
+  filterPath: string;
+  presetPath: string;
+  regexPath: string;
+  tooltip?: string;
+}
+
+const CUSTOM_KEY = "custom";
+
+export function LayerFilterEntry({ filterPath, presetPath, regexPath, tooltip }: LayerFilterEntryProps) {
+  const [filterValue, setFilterValue] = useConfigField<string>(filterPath);
+  const [presetValue, setPresetValue] = useConfigField<string>(presetPath);
+  const [, setRegexValue] = useConfigField<boolean>(regexPath);
+  const [modelType] = useConfigField<string>("model_type");
+
+  const resolvedMap = modelType ? LAYER_PRESETS_BY_MODEL[modelType as keyof typeof LAYER_PRESETS_BY_MODEL] : undefined;
+  const presetMap: LayerPresetMap = resolvedMap ?? EMPTY_PRESETS;
+  const presetKeys = Object.keys(presetMap);
+  const selected =
+    presetValue && (presetKeys.includes(presetValue) || presetValue === CUSTOM_KEY)
+      ? presetValue
+      : (presetKeys[0] ?? CUSTOM_KEY);
+  const isCustom = selected === CUSTOM_KEY;
+  const selectedDef = isCustom ? undefined : presetMap[selected];
+  const inputHidden = !isCustom && (selectedDef?.patterns.length ?? 0) === 0;
+
+  const [localFilter, setLocalFilter] = useState(filterValue ?? "");
+  useEffect(() => {
+    setLocalFilter(filterValue ?? "");
+  }, [filterValue]);
+
+  const handlePresetChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const key = e.target.value;
+    setPresetValue(key);
+    if (key === CUSTOM_KEY) return;
+    const def = presetMap[key];
+    if (!def) return;
+    const joined = def.patterns.join(",");
+    setFilterValue(joined);
+    setRegexValue(def.regex);
+    setLocalFilter(joined);
+  };
+
+  const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setLocalFilter(e.target.value);
+    setFilterValue(e.target.value);
+  };
+
+  return (
+    <FormFieldWrapper label="Layer Filter" tooltip={tooltip} configPath={presetPath} className="flex flex-col gap-2">
+      <div className="flex gap-2 items-center">
+        <select value={selected} onChange={handlePresetChange} className={SELECT_BASE}>
+          {presetKeys.map((k) => (
+            <option key={k} value={k}>
+              {k}
+            </option>
+          ))}
+          <option value={CUSTOM_KEY}>custom</option>
+        </select>
+        {isCustom && <Toggle configPath={regexPath} label="Regex" labelPosition="right" />}
+      </div>
+      {!inputHidden && (
+        <input
+          type="text"
+          value={localFilter}
+          onChange={handleFilterChange}
+          placeholder="Comma-separated layer names or regex..."
+          disabled={!isCustom}
+          className={`${INPUT_FULL} ${PLACEHOLDER}`}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/PathPicker.tsx b/web/gui/src/renderer/components/shared/PathPicker.tsx
new file mode 100644
index 000000000..7a8a85cec
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/PathPicker.tsx
@@ -0,0 +1,82 @@
+import { FolderOpen } from "lucide-react";
+import { type ChangeEvent, type MouseEvent, useEffect, useState } from "react";
+
+import { useConfigField } from "@/hooks/useConfigField";
+import { INPUT_FLEX, SIDE_BUTTON } from "@/utils/inputStyles";
+
+import { FormFieldWrapper } from "./FormFieldWrapper";
+
+export interface PathPickerProps {
+  label: string;
+  mode: "file" | "directory";
+  configPath?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  filters?: Array<{ name: string; extensions: string[] }>;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+export function PathPicker({
+  label,
+  mode,
+  configPath,
+  value: controlledValue,
+  onChange,
+  filters,
+  tooltip,
+  disabled,
+}: PathPickerProps) {
+  const [configValue, setConfigValue] = useConfigField<string>(configPath);
+
+  const externalValue = configPath ? (configValue ?? "") : (controlledValue ?? "");
+  const [localValue, setLocalValue] = useState(externalValue);
+
+  useEffect(() => {
+    setLocalValue(externalValue);
+  }, [externalValue]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (configPath && setConfigValue) setConfigValue(val);
+    if (onChange) onChange(val);
+  };
+
+  const handleBrowse = async (e: MouseEvent<HTMLButtonElement>) => {
+    // Stop the click from propagating to any ancestor label/form that might
+    // swallow it — this bug recurred with the FormFieldWrapper <label> and
+    // defensively guarding it here keeps the picker working even if a caller
+    // wraps it in a new label layer later.
+    e.preventDefault();
+    e.stopPropagation();
+    const api = window.electronAPI;
+    if (!api) {
+      console.warn("[PathPicker] window.electronAPI is unavailable; browse aborted.");
+      return;
+    }
+    const result = mode === "file" ? await api.openFile(filters) : await api.openDirectory();
+    if (result) {
+      setLocalValue(result);
+      if (configPath && setConfigValue) setConfigValue(result);
+      if (onChange) onChange(result);
+    }
+  };
+
+  return (
+    <FormFieldWrapper label={label} tooltip={tooltip} configPath={configPath}>
+      <div className="flex gap-1">
+        <input type="text" value={localValue} onChange={handleChange} disabled={disabled} className={INPUT_FLEX} />
+        <button
+          type="button"
+          onClick={handleBrowse}
+          disabled={disabled}
+          className={SIDE_BUTTON}
+          aria-label={mode === "file" ? "Browse files" : "Browse directory"}
+        >
+          <FolderOpen className="w-4 h-4" />
+        </button>
+      </div>
+    </FormFieldWrapper>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/ProgressBar.tsx b/web/gui/src/renderer/components/shared/ProgressBar.tsx
new file mode 100644
index 000000000..9276e9804
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/ProgressBar.tsx
@@ -0,0 +1,42 @@
+export interface ProgressBarProps {
+  value: number;
+  label?: string;
+  indeterminate?: boolean;
+}
+
+export function ProgressBar({ value, label, indeterminate }: ProgressBarProps) {
+  const clamped = Math.min(100, Math.max(0, value));
+  const isAnimating = !indeterminate && clamped > 0 && clamped < 100;
+
+  return (
+    <div className="flex flex-col gap-1">
+      {label && <span className="text-xs text-[var(--color-on-surface-secondary)]">{label}</span>}
+      <div
+        className="h-2.5 w-full rounded-full bg-[var(--color-border-subtle)] overflow-hidden"
+        role="progressbar"
+        aria-valuenow={clamped}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={label || "Progress"}
+      >
+        <div
+          className={`h-full rounded-full transition-all duration-300 ease-out ${indeterminate ? "skeleton" : ""}`}
+          style={{
+            width: indeterminate ? "100%" : `${clamped}%`,
+            background: indeterminate
+              ? undefined
+              : isAnimating
+                ? `linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent), linear-gradient(90deg, var(--color-cobalt-600), var(--color-azure-500))`
+                : `linear-gradient(90deg, var(--color-cobalt-600), var(--color-azure-500))`,
+            backgroundSize: isAnimating ? "200% 100%, 100% 100%" : undefined,
+            animation: isAnimating ? "progressShimmer 2s ease-in-out infinite" : undefined,
+            boxShadow: clamped > 0 && !indeterminate ? "0 0 8px var(--color-cobalt-600-alpha-20)" : "none",
+          }}
+        />
+      </div>
+      {!indeterminate && (
+        <span className="text-xs text-[var(--color-on-surface-secondary)] tabular-nums">{clamped.toFixed(1)}%</span>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/ScalarChart.tsx b/web/gui/src/renderer/components/shared/ScalarChart.tsx
new file mode 100644
index 000000000..61d0e3ad6
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/ScalarChart.tsx
@@ -0,0 +1,200 @@
+import { formatStep, formatValue, generateTicks } from "@/utils/chartUtils";
+
+const DEFAULT_WIDTH = 520;
+const DEFAULT_HEIGHT = 260;
+const CHART_PADDING = { top: 24, right: 16, bottom: 36, left: 64 };
+
+const DEFAULT_LINE_COLOR = "var(--color-cobalt-600)";
+const GRID_COLOR = "var(--color-border-subtle)";
+const TEXT_COLOR = "var(--color-on-surface-secondary)";
+const AXIS_COLOR = "var(--color-on-surface-secondary)";
+
+export interface ScalarChartProps {
+  tag: string;
+  points: Array<{ step: number; value: number }>;
+  lineColor?: string;
+  width?: number;
+  height?: number;
+}
+
+export function ScalarChart({
+  tag,
+  points,
+  lineColor = DEFAULT_LINE_COLOR,
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+}: ScalarChartProps) {
+  const gradientId = `area-grad-${tag.replace(/[^a-zA-Z0-9]/g, "-")}`;
+
+  if (points.length === 0) {
+    return (
+      <div className="card card-static p-4">
+        <h4 className="m-0 mb-2 font-semibold text-caption text-[var(--color-on-surface)]">{tag}</h4>
+        <div
+          className="flex items-center justify-center text-caption text-[var(--color-on-surface-secondary)]"
+          style={{ height }}
+        >
+          No data yet
+        </div>
+      </div>
+    );
+  }
+
+  const steps = points.map((p) => p.step);
+  const values = points.map((p) => p.value);
+  const minStep = Math.min(...steps);
+  const maxStep = Math.max(...steps);
+  const minVal = Math.min(...values);
+  const maxVal = Math.max(...values);
+
+  const valRange = maxVal - minVal || 1;
+  const yMin = minVal - valRange * 0.05;
+  const yMax = maxVal + valRange * 0.05;
+
+  const stepRange = maxStep - minStep || 1;
+
+  const plotW = width - CHART_PADDING.left - CHART_PADDING.right;
+  const plotH = height - CHART_PADDING.top - CHART_PADDING.bottom;
+
+  const xScale = (step: number) => CHART_PADDING.left + ((step - minStep) / stepRange) * plotW;
+  const yScale = (val: number) => CHART_PADDING.top + plotH - ((val - yMin) / (yMax - yMin)) * plotH;
+
+  const pathParts = points.map((p, i) => {
+    const x = xScale(p.step);
+    const y = yScale(p.value);
+    return `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`;
+  });
+  const linePath = pathParts.join(" ");
+
+  const areaPath =
+    `${linePath} L${xScale(points[points.length - 1].step).toFixed(2)},${(CHART_PADDING.top + plotH).toFixed(2)}` +
+    ` L${xScale(points[0].step).toFixed(2)},${(CHART_PADDING.top + plotH).toFixed(2)} Z`;
+
+  const xTicks = generateTicks(minStep, maxStep, 5);
+  const yTicks = generateTicks(yMin, yMax, 5);
+
+  const latest = points[points.length - 1];
+
+  return (
+    <div className="card card-static p-4">
+      <div className="flex items-baseline justify-between mb-2">
+        <h4 className="m-0 font-semibold text-caption text-[var(--color-on-surface)]">{tag}</h4>
+        <span className="mono tabular-nums text-xs font-semibold" style={{ color: lineColor }}>
+          {formatValue(latest.value)}
+        </span>
+      </div>
+      <svg viewBox={`0 0 ${width} ${height}`} width="100%" className="block">
+        {yTicks.map((tick) => {
+          const y = yScale(tick);
+          return (
+            <line
+              key={`yg-${tick}`}
+              x1={CHART_PADDING.left}
+              y1={y}
+              x2={width - CHART_PADDING.right}
+              y2={y}
+              stroke={GRID_COLOR}
+              strokeWidth="0.5"
+              strokeDasharray="4,3"
+            />
+          );
+        })}
+
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={lineColor} stopOpacity="0.2" />
+            <stop offset="100%" stopColor={lineColor} stopOpacity="0.02" />
+          </linearGradient>
+        </defs>
+        <path d={areaPath} fill={`url(#${gradientId})`} />
+
+        <path
+          d={linePath}
+          fill="none"
+          stroke={lineColor}
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+
+        {xTicks.map((tick) => {
+          const x = xScale(tick);
+          if (x < CHART_PADDING.left || x > width - CHART_PADDING.right) return null;
+          return (
+            <text
+              key={`xl-${tick}`}
+              x={x}
+              y={height - 6}
+              textAnchor="middle"
+              fill={TEXT_COLOR}
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
+              {formatStep(tick)}
+            </text>
+          );
+        })}
+
+        {yTicks.map((tick) => {
+          const y = yScale(tick);
+          if (y < CHART_PADDING.top || y > CHART_PADDING.top + plotH) return null;
+          return (
+            <text
+              key={`yl-${tick}`}
+              x={CHART_PADDING.left - 6}
+              y={y + 3}
+              textAnchor="end"
+              fill={TEXT_COLOR}
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
+              {formatValue(tick)}
+            </text>
+          );
+        })}
+
+        <text
+          x={CHART_PADDING.left + plotW / 2}
+          y={height - 0}
+          textAnchor="middle"
+          fill={AXIS_COLOR}
+          fontSize="9"
+          fontFamily="var(--font-sans)"
+        >
+          step
+        </text>
+
+        <line
+          x1={CHART_PADDING.left}
+          y1={CHART_PADDING.top}
+          x2={CHART_PADDING.left}
+          y2={CHART_PADDING.top + plotH}
+          stroke={AXIS_COLOR}
+          strokeWidth="0.5"
+          opacity="0.5"
+        />
+        <line
+          x1={CHART_PADDING.left}
+          y1={CHART_PADDING.top + plotH}
+          x2={width - CHART_PADDING.right}
+          y2={CHART_PADDING.top + plotH}
+          stroke={AXIS_COLOR}
+          strokeWidth="0.5"
+          opacity="0.5"
+        />
+
+        <text
+          x={width - CHART_PADDING.right}
+          y={CHART_PADDING.top - 8}
+          textAnchor="end"
+          fill={TEXT_COLOR}
+          fontSize="8"
+          fontFamily="var(--font-mono)"
+          opacity="0.6"
+        >
+          {points.length} pts
+        </text>
+      </svg>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/SchemaField.tsx b/web/gui/src/renderer/components/shared/SchemaField.tsx
new file mode 100644
index 000000000..a0714be22
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/SchemaField.tsx
@@ -0,0 +1,76 @@
+import type { FieldDef } from "@/types/uiSchema";
+
+import { DirPicker } from "./DirPicker";
+import { FilePicker } from "./FilePicker";
+import { FormEntry } from "./FormEntry";
+import { LayerFilterEntry } from "./LayerFilterEntry";
+import { Select } from "./Select";
+import { TimeEntry } from "./TimeEntry";
+import { Toggle } from "./Toggle";
+
+export interface SchemaFieldProps {
+  field: FieldDef;
+  /** Called when a "select-adv" field's advanced button is clicked. */
+  onAdvancedClick?: (fieldKey: string) => void;
+  /** Resolve dynamic string options at render time (e.g. from schema.enums). */
+  resolveOptions?: (field: FieldDef) => string[];
+  /** Resolve key-value options at render time (e.g. from schema.dtypeSubsets). */
+  resolveKvOptions?: (field: FieldDef) => Array<{ label: string; value: string }> | undefined;
+}
+
+export function SchemaField({ field, onAdvancedClick, resolveOptions, resolveKvOptions }: SchemaFieldProps) {
+  const stringOptions = resolveOptions ? resolveOptions(field) : (field.stringOptions ?? (field.enumRef ? [] : []));
+  const kvOptions = resolveKvOptions ? resolveKvOptions(field) : field.options;
+
+  switch (field.type) {
+    case "entry":
+      return (
+        <FormEntry
+          label={field.label}
+          configPath={field.key}
+          type={field.inputType ?? "text"}
+          tooltip={field.tooltip}
+          nullable={field.nullable}
+        />
+      );
+    case "file":
+      return <FilePicker label={field.label} configPath={field.key} tooltip={field.tooltip} />;
+    case "dir":
+      return <DirPicker label={field.label} configPath={field.key} tooltip={field.tooltip} />;
+    case "toggle":
+      return <Toggle configPath={field.key} label={field.label} tooltip={field.tooltip} />;
+    case "select":
+      return <Select label={field.label} configPath={field.key} options={stringOptions} tooltip={field.tooltip} />;
+    case "select-kv":
+      return <Select label={field.label} configPath={field.key} options={kvOptions ?? []} tooltip={field.tooltip} />;
+    case "select-adv":
+      return (
+        <Select
+          label={field.label}
+          configPath={field.key}
+          options={stringOptions}
+          tooltip={field.tooltip}
+          onAdvancedClick={() => onAdvancedClick?.(field.key)}
+        />
+      );
+    case "time-entry":
+      return (
+        <TimeEntry
+          label={field.label}
+          valuePath={field.valuePath ?? field.key}
+          unitPath={field.unitPath ?? `${field.key}_unit`}
+          tooltip={field.tooltip}
+        />
+      );
+    case "layer-filter":
+      return (
+        <LayerFilterEntry
+          filterPath={field.filterPath ?? "layer_filter"}
+          presetPath={field.presetPath ?? "layer_filter_preset"}
+          regexPath={field.regexPath ?? "layer_filter_regex"}
+        />
+      );
+    default:
+      return null;
+  }
+}
diff --git a/web/gui/src/renderer/components/shared/SectionCard.tsx b/web/gui/src/renderer/components/shared/SectionCard.tsx
new file mode 100644
index 000000000..26b92367b
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/SectionCard.tsx
@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+
+import { Card, type CardProps } from "./Card";
+
+export interface SectionCardProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+  padding?: CardProps["padding"];
+}
+
+export function SectionCard({ title, children, className, padding }: SectionCardProps) {
+  return (
+    <Card className={`relative overflow-hidden pl-6 ${className ?? ""}`} padding={padding}>
+      <div
+        className="absolute left-0 top-0 bottom-0 w-[3px] rounded-full"
+        style={{ background: "linear-gradient(180deg, var(--color-cobalt-600), var(--color-azure-500))" }}
+      />
+      <h3 className="text-sm font-semibold uppercase tracking-wider mb-4 text-[var(--color-on-surface-secondary)]">
+        {title}
+      </h3>
+      {children}
+    </Card>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/Select.tsx b/web/gui/src/renderer/components/shared/Select.tsx
new file mode 100644
index 000000000..6a941d5a6
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/Select.tsx
@@ -0,0 +1,94 @@
+import { MoreHorizontal } from "lucide-react";
+import { type ChangeEvent, forwardRef } from "react";
+
+import { useConfigField } from "@/hooks/useConfigField";
+import { enumLabel } from "@/utils/enumLabels";
+import { SELECT_FLEX, SELECT_FULL, SIDE_BUTTON } from "@/utils/inputStyles";
+
+import { FormFieldWrapper } from "./FormFieldWrapper";
+
+export interface SelectKVOption {
+  label: string;
+  value: string;
+}
+
+export interface SelectProps {
+  label: string;
+  options: string[] | SelectKVOption[];
+  configPath?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  onAdvancedClick?: () => void;
+  tooltip?: string;
+  disabled?: boolean;
+  /** Custom label formatter for string option display. Defaults to `enumLabel`. */
+  formatLabel?: (value: string) => string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      label,
+      options,
+      configPath,
+      value: controlledValue,
+      onChange,
+      onAdvancedClick,
+      tooltip,
+      disabled,
+      formatLabel = enumLabel,
+    },
+    ref,
+  ) => {
+    const [configValue, setConfigValue] = useConfigField<string>(configPath);
+
+    const currentValue = configPath ? (configValue ?? "") : (controlledValue ?? "");
+
+    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      const val = e.target.value;
+      if (configPath && setConfigValue) setConfigValue(val);
+      if (onChange) onChange(val);
+    };
+
+    const isKV = options.length > 0 && typeof options[0] !== "string";
+    const selectClass = onAdvancedClick ? SELECT_FLEX : SELECT_FULL;
+
+    const selectEl = (
+      <select ref={ref} value={currentValue} onChange={handleChange} disabled={disabled} className={selectClass}>
+        {isKV
+          ? (options as SelectKVOption[]).map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))
+          : (options as string[]).map((opt) => (
+              <option key={opt} value={opt}>
+                {formatLabel(opt)}
+              </option>
+            ))}
+      </select>
+    );
+
+    return (
+      <FormFieldWrapper label={label} tooltip={tooltip} configPath={configPath}>
+        {onAdvancedClick ? (
+          <div className="flex gap-1">
+            {selectEl}
+            <button
+              type="button"
+              onClick={onAdvancedClick}
+              disabled={disabled}
+              className={SIDE_BUTTON}
+              aria-label="Advanced settings"
+            >
+              <MoreHorizontal className="w-4 h-4" />
+            </button>
+          </div>
+        ) : (
+          selectEl
+        )}
+      </FormFieldWrapper>
+    );
+  },
+);
+Select.displayName = "Select";
diff --git a/web/gui/src/renderer/components/shared/Skeleton.tsx b/web/gui/src/renderer/components/shared/Skeleton.tsx
new file mode 100644
index 000000000..5c37b905f
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/Skeleton.tsx
@@ -0,0 +1,17 @@
+export interface SkeletonProps {
+  width?: string;
+  height?: string;
+  variant?: "text" | "rectangular" | "circular";
+  count?: number;
+}
+
+export function Skeleton({ width = "100%", height = "1rem", variant = "text", count = 1 }: SkeletonProps) {
+  const radiusClass = variant === "circular" ? "rounded-full" : variant === "text" ? "rounded-[var(--radius-sm)]" : "";
+  return (
+    <div className="flex flex-col gap-2" aria-busy="true" aria-label="Loading">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className={`skeleton ${radiusClass}`} style={{ width, height }} />
+      ))}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/SliderEntry.tsx b/web/gui/src/renderer/components/shared/SliderEntry.tsx
new file mode 100644
index 000000000..e52e73643
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/SliderEntry.tsx
@@ -0,0 +1,96 @@
+import { type ChangeEvent, useCallback, useEffect, useState } from "react";
+
+import { useConfigField } from "@/hooks/useConfigField";
+import { INPUT_BASE, PLACEHOLDER } from "@/utils/inputStyles";
+
+import { FormFieldWrapper } from "./FormFieldWrapper";
+
+export interface SliderEntryProps {
+  label: string;
+  configPath?: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+export function SliderEntry({
+  label,
+  configPath,
+  value: controlledValue,
+  onChange,
+  min,
+  max,
+  step = 0.01,
+  tooltip,
+  disabled,
+}: SliderEntryProps) {
+  const [configValue, setConfigValue] = useConfigField<number>(configPath);
+
+  const externalValue = configPath ? configValue : controlledValue;
+  const [localValue, setLocalValue] = useState<number>(externalValue ?? min);
+
+  useEffect(() => {
+    setLocalValue(externalValue ?? min);
+  }, [externalValue, min]);
+
+  const commit = useCallback(
+    (v: number) => {
+      const clamped = Math.min(max, Math.max(min, v));
+      setLocalValue(clamped);
+      if (configPath && setConfigValue) setConfigValue(clamped);
+      if (onChange) onChange(clamped);
+    },
+    [configPath, setConfigValue, onChange, min, max],
+  );
+
+  const handleSlider = (e: ChangeEvent<HTMLInputElement>) => {
+    commit(Number(e.target.value));
+  };
+
+  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    if (raw === "") {
+      setLocalValue(min);
+      return;
+    }
+    const parsed = Number(raw);
+    if (!isNaN(parsed)) commit(parsed);
+  };
+
+  // Compute fill percentage for the slider track gradient.
+  const pct = max > min ? ((localValue - min) / (max - min)) * 100 : 0;
+
+  return (
+    <FormFieldWrapper label={label} tooltip={tooltip} configPath={configPath}>
+      <div className="flex items-center gap-2">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={localValue}
+          onChange={handleSlider}
+          disabled={disabled}
+          className="flex-[2] h-2 rounded-full appearance-none cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--color-cobalt-600)] [&::-webkit-slider-thumb]:shadow-[0_1px_4px_var(--color-cobalt-600-alpha-30)] [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:hover:scale-110 [&::-webkit-slider-thumb]:active:scale-95 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-[var(--color-cobalt-600)] [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-[0_1px_4px_var(--color-cobalt-600-alpha-30)] [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-transform [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:hover:scale-110 [&::-moz-range-thumb]:active:scale-95"
+          style={{
+            background: `linear-gradient(to right, var(--color-cobalt-600) 0%, var(--color-cobalt-600) ${pct}%, var(--color-border-subtle) ${pct}%, var(--color-border-subtle) 100%)`,
+          }}
+        />
+        <input
+          type="number"
+          min={min}
+          max={max}
+          step={step}
+          value={localValue}
+          onChange={handleInput}
+          disabled={disabled}
+          className={`flex-1 min-w-[70px] text-center ${INPUT_BASE} ${PLACEHOLDER}`}
+        />
+      </div>
+    </FormFieldWrapper>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/TimeEntry.tsx b/web/gui/src/renderer/components/shared/TimeEntry.tsx
new file mode 100644
index 000000000..534feb12f
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/TimeEntry.tsx
@@ -0,0 +1,52 @@
+import { type ChangeEvent, useEffect, useState } from "react";
+
+import { useConfigField } from "@/hooks/useConfigField";
+import type { TimeUnit } from "@/types/generated/enums";
+import { TimeUnitValues } from "@/types/generated/enums";
+import { INPUT_FLEX, SELECT_BASE } from "@/utils/inputStyles";
+
+import { FormFieldWrapper } from "./FormFieldWrapper";
+
+export interface TimeEntryProps {
+  label: string;
+  valuePath: string;
+  unitPath: string;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+export function TimeEntry({ label, valuePath, unitPath, tooltip, disabled }: TimeEntryProps) {
+  const [numValue, setNumValue] = useConfigField<number>(valuePath);
+  const [unitValue, setUnitValue] = useConfigField<TimeUnit>(unitPath);
+  const [localNum, setLocalNum] = useState(String(numValue ?? ""));
+
+  useEffect(() => {
+    setLocalNum(numValue != null ? String(numValue) : "");
+  }, [numValue]);
+
+  const handleNumChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    setLocalNum(raw);
+    const parsed = Number(raw);
+    if (!isNaN(parsed)) setNumValue(parsed);
+  };
+
+  const handleUnitChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    setUnitValue(e.target.value as TimeUnit);
+  };
+
+  return (
+    <FormFieldWrapper label={label} tooltip={tooltip} configPath={valuePath}>
+      <div className="flex gap-1">
+        <input type="number" value={localNum} onChange={handleNumChange} disabled={disabled} className={INPUT_FLEX} />
+        <select value={unitValue ?? "NEVER"} onChange={handleUnitChange} disabled={disabled} className={SELECT_BASE}>
+          {TimeUnitValues.map((u) => (
+            <option key={u} value={u}>
+              {u}
+            </option>
+          ))}
+        </select>
+      </div>
+    </FormFieldWrapper>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/Toggle.tsx b/web/gui/src/renderer/components/shared/Toggle.tsx
new file mode 100644
index 000000000..9276cbe79
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/Toggle.tsx
@@ -0,0 +1,68 @@
+import { useConfigField } from "@/hooks/useConfigField";
+import { getTooltip } from "@/utils/tooltips";
+
+import { Tooltip } from "./Tooltip";
+
+export interface ToggleProps {
+  label?: string;
+  labelPosition?: "left" | "right";
+  configPath?: string;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+  tooltip?: string;
+}
+
+export function Toggle({
+  label,
+  labelPosition = "right",
+  configPath,
+  value,
+  onChange,
+  disabled,
+  tooltip,
+}: ToggleProps) {
+  const resolvedTooltip = tooltip ?? (configPath ? getTooltip(configPath) : undefined);
+  const [configValue, setConfigValue] = useConfigField<boolean>(configPath);
+  const checked = configPath ? (configValue ?? false) : (value ?? false);
+  const handleChange = () => {
+    const next = !checked;
+    if (configPath && setConfigValue) setConfigValue(next);
+    if (onChange) onChange(next);
+  };
+
+  const switchEl = (
+    <button
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={handleChange}
+      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-[background,box-shadow,transform] duration-200 ease-out cursor-pointer hover:scale-105
+        disabled:opacity-40 disabled:cursor-not-allowed
+        ${checked ? "" : "bg-[var(--color-border-subtle)]"}`}
+      style={{
+        background: checked ? "linear-gradient(135deg, var(--color-cobalt-600), var(--color-azure-500))" : undefined,
+        boxShadow: checked ? "0 0 8px var(--color-cobalt-600-alpha-25)" : "inset 0 1px 3px rgba(0,0,0,0.15)",
+      }}
+    >
+      <span
+        className={`inline-block h-4 w-4 rounded-full bg-white transition-transform duration-200 ease-out
+          ${checked ? "translate-x-[17px]" : "translate-x-[3px]"}`}
+        style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.15)" }}
+      />
+    </button>
+  );
+
+  const content = label ? (
+    <label className="inline-flex items-center gap-3 cursor-pointer text-sm text-[var(--color-on-surface)]">
+      {labelPosition === "left" && <span>{label}</span>}
+      {switchEl}
+      {labelPosition === "right" && <span>{label}</span>}
+    </label>
+  ) : (
+    switchEl
+  );
+
+  if (resolvedTooltip) return <Tooltip content={resolvedTooltip}>{content}</Tooltip>;
+  return content;
+}
diff --git a/web/gui/src/renderer/components/shared/Tooltip.tsx b/web/gui/src/renderer/components/shared/Tooltip.tsx
new file mode 100644
index 000000000..0daa6753d
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/Tooltip.tsx
@@ -0,0 +1,217 @@
+import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export interface TooltipProps {
+  children: ReactNode;
+  content: ReactNode;
+  position?: "top" | "right" | "bottom" | "left";
+  delay?: number;
+}
+
+interface Coords {
+  top: number;
+  left: number;
+  resolvedPosition: "top" | "right" | "bottom" | "left";
+}
+
+const ARROW_SIZE = 6;
+const OFFSET = 8;
+
+function computeCoords(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  preferred: "top" | "right" | "bottom" | "left",
+): Coords {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const fits = {
+    top: triggerRect.top - tooltipRect.height - OFFSET - ARROW_SIZE > 0,
+    bottom: triggerRect.bottom + tooltipRect.height + OFFSET + ARROW_SIZE < vh,
+    left: triggerRect.left - tooltipRect.width - OFFSET - ARROW_SIZE > 0,
+    right: triggerRect.right + tooltipRect.width + OFFSET + ARROW_SIZE < vw,
+  };
+
+  const opposites: Record<string, "top" | "right" | "bottom" | "left"> = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+  };
+  const fallbackOrder: Array<"top" | "right" | "bottom" | "left"> = [
+    preferred,
+    opposites[preferred],
+    ...(["top", "right", "bottom", "left"] as const).filter((d) => d !== preferred && d !== opposites[preferred]),
+  ];
+
+  const resolved = fallbackOrder.find((d) => fits[d]) ?? preferred;
+
+  let top = 0;
+  let left = 0;
+
+  switch (resolved) {
+    case "top":
+      top = triggerRect.top - tooltipRect.height - OFFSET - ARROW_SIZE;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      break;
+    case "bottom":
+      top = triggerRect.bottom + OFFSET + ARROW_SIZE;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      break;
+    case "left":
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+      left = triggerRect.left - tooltipRect.width - OFFSET - ARROW_SIZE;
+      break;
+    case "right":
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+      left = triggerRect.right + OFFSET + ARROW_SIZE;
+      break;
+  }
+
+  // Clamp within viewport
+  left = Math.max(4, Math.min(left, vw - tooltipRect.width - 4));
+  top = Math.max(4, Math.min(top, vh - tooltipRect.height - 4));
+
+  return { top, left, resolvedPosition: resolved };
+}
+
+function arrowStyle(pos: "top" | "right" | "bottom" | "left"): React.CSSProperties {
+  const base: React.CSSProperties = {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    borderColor: "transparent",
+  };
+
+  const color = "var(--color-slate-950)";
+  const size = `${ARROW_SIZE}px`;
+
+  switch (pos) {
+    case "top":
+      return {
+        ...base,
+        bottom: `-${ARROW_SIZE}px`,
+        left: "50%",
+        transform: "translateX(-50%)",
+        borderWidth: `${size} ${size} 0 ${size}`,
+        borderTopColor: color,
+      };
+    case "bottom":
+      return {
+        ...base,
+        top: `-${ARROW_SIZE}px`,
+        left: "50%",
+        transform: "translateX(-50%)",
+        borderWidth: `0 ${size} ${size} ${size}`,
+        borderBottomColor: color,
+      };
+    case "left":
+      return {
+        ...base,
+        right: `-${ARROW_SIZE}px`,
+        top: "50%",
+        transform: "translateY(-50%)",
+        borderWidth: `${size} 0 ${size} ${size}`,
+        borderLeftColor: color,
+      };
+    case "right":
+      return {
+        ...base,
+        left: `-${ARROW_SIZE}px`,
+        top: "50%",
+        transform: "translateY(-50%)",
+        borderWidth: `${size} ${size} ${size} 0`,
+        borderRightColor: color,
+      };
+  }
+}
+
+export function Tooltip({ children, content, position = "top", delay = 200 }: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const [coords, setCoords] = useState<Coords | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const tooltipRef = useRef<HTMLSpanElement>(null);
+  const id = useId();
+
+  const updatePosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    setCoords(computeCoords(triggerRect, tooltipRect, position));
+  }, [position]);
+
+  const show = () => {
+    timeoutRef.current = setTimeout(() => setVisible(true), delay);
+  };
+
+  const hide = () => {
+    clearTimeout(timeoutRef.current);
+    setVisible(false);
+    setCoords(null);
+  };
+
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
+
+    const handleScrollOrResize = () => updatePosition();
+
+    window.addEventListener("scroll", handleScrollOrResize, { passive: true });
+    window.addEventListener("resize", handleScrollOrResize, { passive: true });
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", handleScrollOrResize);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [visible, updatePosition]);
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className="inline-flex"
+        onMouseEnter={show}
+        onMouseLeave={hide}
+        onFocus={show}
+        onBlur={hide}
+      >
+        <span aria-describedby={visible ? id : undefined}>{children}</span>
+      </span>
+
+      {visible &&
+        createPortal(
+          <span
+            ref={tooltipRef}
+            id={id}
+            role="tooltip"
+            className="pointer-events-none z-[9999] px-3 py-2 text-sm rounded-[var(--radius-sm)]
+              bg-[var(--color-slate-950)] text-[var(--color-frost-50)] shadow-[var(--shadow-2)]"
+            style={{
+              position: "fixed",
+              top: coords ? coords.top : -9999,
+              left: coords ? coords.left : -9999,
+              maxWidth: 300,
+              whiteSpace: "normal",
+              opacity: coords ? 1 : 0,
+              transition: "opacity 150ms ease-out",
+            }}
+          >
+            {content}
+            {coords && <span style={arrowStyle(coords.resolvedPosition)} />}
+          </span>,
+          document.body,
+        )}
+    </>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/index.ts b/web/gui/src/renderer/components/shared/index.ts
new file mode 100644
index 000000000..1d1f4fe3d
--- /dev/null
+++ b/web/gui/src/renderer/components/shared/index.ts
@@ -0,0 +1,21 @@
+export { ArrayItemHeader, type ArrayItemHeaderProps } from "./ArrayItemHeader";
+export { Button, type ButtonProps } from "./Button";
+export { Card, type CardProps } from "./Card";
+export { DirPicker, type DirPickerProps } from "./DirPicker";
+export { DualProgress, type DualProgressProps } from "./DualProgress";
+export { EmptyState, type EmptyStateProps } from "./EmptyState";
+export { FilePicker, type FilePickerProps } from "./FilePicker";
+export { FormEntry, type FormEntryProps } from "./FormEntry";
+export { FormFieldWrapper, type FormFieldWrapperProps } from "./FormFieldWrapper";
+export { IconButton, type IconButtonProps } from "./IconButton";
+export { LayerFilterEntry, type LayerFilterEntryProps } from "./LayerFilterEntry";
+export { PathPicker, type PathPickerProps } from "./PathPicker";
+export { ProgressBar, type ProgressBarProps } from "./ProgressBar";
+export { SchemaField, type SchemaFieldProps } from "./SchemaField";
+export { SectionCard, type SectionCardProps } from "./SectionCard";
+export { Select, type SelectKVOption, type SelectProps } from "./Select";
+export { Skeleton, type SkeletonProps } from "./Skeleton";
+export { SliderEntry, type SliderEntryProps } from "./SliderEntry";
+export { TimeEntry, type TimeEntryProps } from "./TimeEntry";
+export { Toggle, type ToggleProps } from "./Toggle";
+export { Tooltip, type TooltipProps } from "./Tooltip";
diff --git a/web/gui/src/renderer/hooks/useArrayField.ts b/web/gui/src/renderer/hooks/useArrayField.ts
new file mode 100644
index 000000000..945bbf63f
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useArrayField.ts
@@ -0,0 +1,49 @@
+import { useCallback, useMemo } from "react";
+
+import { useConfigField } from "./useConfigField";
+
+interface UseArrayFieldOptions<T> {
+  path: string;
+  createDefault: () => T;
+  prepareClone?: (item: T) => T;
+}
+
+interface UseArrayFieldReturn<T> {
+  items: T[];
+  add: () => void;
+  remove: (index: number) => void;
+  clone: (index: number) => void;
+}
+
+export function useArrayField<T>({
+  path,
+  createDefault,
+  prepareClone,
+}: UseArrayFieldOptions<T>): UseArrayFieldReturn<T> {
+  const [value, setValue] = useConfigField<T[]>(path);
+  const items = useMemo(() => value ?? [], [value]);
+
+  const add = useCallback(() => {
+    setValue([...items, createDefault()]);
+  }, [items, setValue, createDefault]);
+
+  const remove = useCallback(
+    (index: number) => {
+      setValue(items.filter((_, i) => i !== index));
+    },
+    [items, setValue],
+  );
+
+  const clone = useCallback(
+    (index: number) => {
+      const cloned = JSON.parse(JSON.stringify(items[index])) as T;
+      const prepared = prepareClone ? prepareClone(cloned) : cloned;
+      const next = [...items];
+      next.splice(index + 1, 0, prepared);
+      setValue(next);
+    },
+    [items, setValue, prepareClone],
+  );
+
+  return { items, add, remove, clone };
+}
diff --git a/web/gui/src/renderer/hooks/useConfigField.ts b/web/gui/src/renderer/hooks/useConfigField.ts
new file mode 100644
index 000000000..d509794f9
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useConfigField.ts
@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+import { getByPath, useConfigStore } from "@/store/configStore";
+
+export function useConfigField<T>(path: string | null | undefined): [T | undefined, (value: T) => void] {
+  const value = useConfigStore((state) => {
+    if (!path || state.config === null) return undefined;
+    return getByPath(state.config as unknown as Record<string, unknown>, path) as T | undefined;
+  });
+
+  const updateField = useConfigStore((state) => state.updateField);
+
+  const setValue = useCallback(
+    (newValue: T) => {
+      if (path) updateField(path, newValue);
+    },
+    [updateField, path],
+  );
+
+  return [value, setValue];
+}
diff --git a/web/gui/src/renderer/hooks/useElapsedTime.ts b/web/gui/src/renderer/hooks/useElapsedTime.ts
new file mode 100644
index 000000000..81cfce93f
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useElapsedTime.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useElapsedTime(startTime: number | null, active: boolean): number {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!active || !startTime) {
+      setElapsed(0);
+      return;
+    }
+    const tick = () => setElapsed(Math.floor((Date.now() - startTime) / 1000));
+    tick();
+    const interval = setInterval(tick, 1000);
+    return () => clearInterval(interval);
+  }, [active, startTime]);
+
+  return elapsed;
+}
diff --git a/web/gui/src/renderer/hooks/useMaskEditor.ts b/web/gui/src/renderer/hooks/useMaskEditor.ts
new file mode 100644
index 000000000..490323f96
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useMaskEditor.ts
@@ -0,0 +1,184 @@
+import { useCallback, useRef, useState } from "react";
+
+import { type ImageListItem, toolsApi, type YoloDetection } from "@/api/toolsApi";
+
+export type MaskTool = "brush" | "eraser" | "polygon";
+
+export interface MaskEditorState {
+  tool: MaskTool;
+  brushSize: number;
+  zoom: number;
+  panOffset: { x: number; y: number };
+  currentImagePath: string | null;
+  maskModified: boolean;
+  yoloModelPath: string;
+  yoloDetections: YoloDetection[];
+  yoloLoading: boolean;
+  images: ImageListItem[];
+  folder: string;
+  includeSubdirs: boolean;
+  saving: boolean;
+  smooth: number;
+  expand: number;
+}
+
+const MAX_UNDO = 20;
+
+export function useMaskEditor(initialFolder?: string) {
+  const [state, setState] = useState<MaskEditorState>({
+    tool: "brush",
+    brushSize: 20,
+    zoom: 1,
+    panOffset: { x: 0, y: 0 },
+    currentImagePath: null,
+    maskModified: false,
+    yoloModelPath: "",
+    yoloDetections: [],
+    yoloLoading: false,
+    images: [],
+    folder: initialFolder ?? "",
+    includeSubdirs: false,
+    saving: false,
+    smooth: 0,
+    expand: 0,
+  });
+
+  const undoStackRef = useRef<ImageData[]>([]);
+  const redoStackRef = useRef<ImageData[]>([]);
+  const maskCanvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  const update = useCallback(<K extends keyof MaskEditorState>(field: K, value: MaskEditorState[K]) => {
+    setState((prev) => ({ ...prev, [field]: value }));
+  }, []);
+
+  const loadImages = useCallback(async (folder: string, includeSubdirs: boolean) => {
+    try {
+      const images = await toolsApi.listMaskEditorImages(folder, includeSubdirs);
+      setState((prev) => ({ ...prev, images, folder, includeSubdirs }));
+    } catch {
+      setState((prev) => ({ ...prev, images: [] }));
+    }
+  }, []);
+
+  const selectImage = useCallback((path: string) => {
+    undoStackRef.current = [];
+    redoStackRef.current = [];
+    setState((prev) => ({
+      ...prev,
+      currentImagePath: path,
+      maskModified: false,
+      yoloDetections: [],
+      zoom: 1,
+      panOffset: { x: 0, y: 0 },
+    }));
+  }, []);
+
+  const pushUndo = useCallback(() => {
+    const canvas = maskCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    undoStackRef.current.push(data);
+    if (undoStackRef.current.length > MAX_UNDO) undoStackRef.current.shift();
+    redoStackRef.current = [];
+    setState((prev) => ({ ...prev, maskModified: true }));
+  }, []);
+
+  const undo = useCallback(() => {
+    const canvas = maskCanvasRef.current;
+    if (!canvas || undoStackRef.current.length === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    redoStackRef.current.push(current);
+    const prev = undoStackRef.current.pop();
+    if (prev) ctx.putImageData(prev, 0, 0);
+  }, []);
+
+  const redo = useCallback(() => {
+    const canvas = maskCanvasRef.current;
+    if (!canvas || redoStackRef.current.length === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    undoStackRef.current.push(current);
+    const next = redoStackRef.current.pop();
+    if (next) ctx.putImageData(next, 0, 0);
+  }, []);
+
+  const runYolo = useCallback(async () => {
+    if (!state.currentImagePath || !state.yoloModelPath) return;
+    setState((prev) => ({ ...prev, yoloLoading: true }));
+    try {
+      const result = await toolsApi.yoloPredict(state.currentImagePath, state.yoloModelPath);
+      setState((prev) => ({
+        ...prev,
+        yoloDetections: result.ok ? result.detections : [],
+        yoloLoading: false,
+      }));
+    } catch {
+      setState((prev) => ({ ...prev, yoloDetections: [], yoloLoading: false }));
+    }
+  }, [state.currentImagePath, state.yoloModelPath]);
+
+  const saveMask = useCallback(async () => {
+    const canvas = maskCanvasRef.current;
+    if (!canvas || !state.currentImagePath) return;
+    setState((prev) => ({ ...prev, saving: true }));
+
+    try {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const exportCanvas = document.createElement("canvas");
+      exportCanvas.width = canvas.width;
+      exportCanvas.height = canvas.height;
+      const exportCtx = exportCanvas.getContext("2d");
+      if (!exportCtx) return;
+      const exportData = exportCtx.createImageData(canvas.width, canvas.height);
+
+      for (let i = 0; i < imageData.data.length; i += 4) {
+        const alpha = imageData.data[i + 3];
+        const value = alpha >= 128 ? 255 : 0;
+        exportData.data[i] = value;
+        exportData.data[i + 1] = value;
+        exportData.data[i + 2] = value;
+        exportData.data[i + 3] = 255;
+      }
+      exportCtx.putImageData(exportData, 0, 0);
+
+      const blob = await new Promise<Blob>((resolve, reject) => {
+        exportCanvas.toBlob((b) => {
+          if (b) resolve(b);
+          else reject(new Error("Failed to create blob"));
+        }, "image/png");
+      });
+
+      await toolsApi.saveMask(state.currentImagePath, blob, state.smooth, state.expand);
+      setState((prev) => ({ ...prev, maskModified: false, saving: false }));
+
+      if (state.folder) {
+        const images = await toolsApi.listMaskEditorImages(state.folder, state.includeSubdirs);
+        setState((prev) => ({ ...prev, images }));
+      }
+    } catch {
+      setState((prev) => ({ ...prev, saving: false }));
+    }
+  }, [state.currentImagePath, state.folder, state.includeSubdirs, state.smooth, state.expand]);
+
+  return {
+    state,
+    update,
+    loadImages,
+    selectImage,
+    maskCanvasRef,
+    pushUndo,
+    undo,
+    redo,
+    runYolo,
+    saveMask,
+    canUndo: undoStackRef.current.length > 0,
+    canRedo: redoStackRef.current.length > 0,
+  };
+}
diff --git a/web/gui/src/renderer/hooks/useReconnectingWebSocket.ts b/web/gui/src/renderer/hooks/useReconnectingWebSocket.ts
new file mode 100644
index 000000000..16b5104ac
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useReconnectingWebSocket.ts
@@ -0,0 +1,92 @@
+import { useEffect, useRef } from "react";
+
+import { WS_BASE } from "@/api/request";
+
+const INITIAL_RETRY_MS = 1000;
+const MAX_RETRY_MS = 30000;
+const BACKOFF_FACTOR = 2;
+
+interface UseReconnectingWebSocketOptions {
+  path: string;
+  onMessage: (event: MessageEvent) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  enabled?: boolean;
+}
+
+export function useReconnectingWebSocket({
+  path,
+  onMessage,
+  onOpen,
+  onClose,
+  enabled = true,
+}: UseReconnectingWebSocketOptions): React.RefObject<WebSocket | null> {
+  const wsRef = useRef<WebSocket | null>(null);
+  const retryRef = useRef(INITIAL_RETRY_MS);
+
+  const onMessageRef = useRef(onMessage);
+  onMessageRef.current = onMessage;
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    let active = true;
+    let retryTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const url = `${WS_BASE}${path}`;
+
+    function connect() {
+      if (!active) return;
+
+      const ws = new WebSocket(url);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        retryRef.current = INITIAL_RETRY_MS;
+        onOpenRef.current?.();
+      };
+
+      ws.onmessage = (event) => {
+        onMessageRef.current(event);
+      };
+
+      ws.onclose = () => {
+        wsRef.current = null;
+        onCloseRef.current?.();
+        scheduleReconnect();
+      };
+
+      ws.onerror = () => {
+        ws.close();
+      };
+    }
+
+    function scheduleReconnect() {
+      if (!active) return;
+
+      retryTimer = setTimeout(() => {
+        retryRef.current = Math.min(retryRef.current * BACKOFF_FACTOR, MAX_RETRY_MS);
+        connect();
+      }, retryRef.current);
+    }
+
+    connect();
+
+    return () => {
+      active = false;
+      if (retryTimer) {
+        clearTimeout(retryTimer);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [enabled, path]);
+
+  return wsRef;
+}
diff --git a/web/gui/src/renderer/hooks/useTerminalWebSocket.ts b/web/gui/src/renderer/hooks/useTerminalWebSocket.ts
new file mode 100644
index 000000000..cf6735841
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useTerminalWebSocket.ts
@@ -0,0 +1,61 @@
+import { useEffect, useRef } from "react";
+
+import { useReconnectingWebSocket } from "./useReconnectingWebSocket";
+
+const FLUSH_INTERVAL_MS = 50;
+
+interface LogData {
+  text: string;
+  ts: number;
+}
+
+interface WsMessage {
+  type: "log";
+  data: LogData;
+}
+
+export function useTerminalWebSocket(onData: (text: string) => void, enabled = true): void {
+  const pendingRef = useRef<string[]>([]);
+  const flushTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const onDataRef = useRef(onData);
+  onDataRef.current = onData;
+
+  useReconnectingWebSocket({
+    path: "/ws/terminal",
+    onMessage: (event: MessageEvent) => {
+      try {
+        const msg: WsMessage = JSON.parse(event.data);
+        if (msg.type === "log" && msg.data?.text) {
+          pendingRef.current.push(msg.data.text);
+        }
+      } catch {
+        // ignore unparseable
+      }
+    },
+    enabled,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    flushTimerRef.current = setInterval(() => {
+      if (pendingRef.current.length > 0) {
+        const batch = pendingRef.current.join("");
+        pendingRef.current = [];
+        onDataRef.current(batch);
+      }
+    }, FLUSH_INTERVAL_MS);
+
+    return () => {
+      if (flushTimerRef.current) {
+        clearInterval(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
+      if (pendingRef.current.length > 0) {
+        const batch = pendingRef.current.join("");
+        pendingRef.current = [];
+        onDataRef.current(batch);
+      }
+    };
+  }, [enabled]);
+}
diff --git a/web/gui/src/renderer/hooks/useToolPolling.ts b/web/gui/src/renderer/hooks/useToolPolling.ts
new file mode 100644
index 000000000..e0bb01f33
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useToolPolling.ts
@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from "react";
+
+import { toolsApi, type ToolStatusResponse } from "@/api/toolsApi";
+
+interface UseToolPollingResult {
+  status: ToolStatusResponse | null;
+  isRunning: boolean;
+  error: string | null;
+  start: () => void;
+  stop: () => void;
+  setError: (error: string | null) => void;
+  progress: number;
+  progressLabel: string;
+}
+
+export function useToolPolling(): UseToolPollingResult {
+  const [status, setStatus] = useState<ToolStatusResponse | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (!isRunning) return;
+
+    const poll = async () => {
+      try {
+        const s = await toolsApi.getStatus();
+        setStatus(s);
+        if (s.status === "completed" || s.status === "error" || s.status === "idle") {
+          setIsRunning(false);
+          if (s.status === "error" && s.error) setError(s.error);
+        }
+      } catch {
+        /* ignore */
+      }
+    };
+
+    pollRef.current = setInterval(poll, 500);
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [isRunning]);
+
+  const progress = status && status.max_progress > 0 ? (status.progress / status.max_progress) * 100 : 0;
+  const progressLabel =
+    status && status.max_progress > 0
+      ? `${status.progress} / ${status.max_progress}`
+      : isRunning
+        ? "Starting..."
+        : "0 / 0";
+
+  return {
+    status,
+    isRunning,
+    error,
+    start: () => {
+      setError(null);
+      setIsRunning(true);
+      setStatus(null);
+    },
+    stop: () => setIsRunning(false),
+    setError,
+    progress,
+    progressLabel,
+  };
+}
diff --git a/web/gui/src/renderer/hooks/useTrainingWebSocket.ts b/web/gui/src/renderer/hooks/useTrainingWebSocket.ts
new file mode 100644
index 000000000..64e2b759c
--- /dev/null
+++ b/web/gui/src/renderer/hooks/useTrainingWebSocket.ts
@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useRef } from "react";
+
+import { useTrainingStore } from "@/store/trainingStore";
+
+import { useReconnectingWebSocket } from "./useReconnectingWebSocket";
+
+interface ProgressData {
+  epoch: number;
+  epoch_step: number;
+  epoch_sample: number;
+  global_step: number;
+  max_step: number;
+  max_epoch: number;
+}
+
+interface StatusData {
+  text: string;
+}
+
+interface SampleData {
+  file_type: string;
+  format: string;
+  data: string | null;
+}
+
+interface SampleProgressData {
+  step: number;
+  max_step: number;
+}
+
+interface ErrorData {
+  message: string;
+}
+
+type WsMessage =
+  | { type: "progress"; data: ProgressData }
+  | { type: "status"; data: StatusData }
+  | { type: "sample"; data: SampleData }
+  | { type: "sample_progress"; data: SampleProgressData }
+  | { type: "error"; data: ErrorData };
+
+export function useTrainingWebSocket(enabled = true): void {
+  const progressBufferRef = useRef<ProgressData | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  const setStatus = useTrainingStore((s) => s.setStatus);
+  const setProgress = useTrainingStore((s) => s.setProgress);
+  const setError = useTrainingStore((s) => s.setError);
+  const setStatusText = useTrainingStore((s) => s.setStatusText);
+  const addSampleUrl = useTrainingStore((s) => s.addSampleUrl);
+
+  const flushProgressBuffer = useCallback(() => {
+    const data = progressBufferRef.current;
+    if (data) {
+      setProgress({
+        step: data.epoch_step,
+        maxStep: data.max_step,
+        epoch: data.epoch,
+        maxEpoch: data.max_epoch,
+        loss: null,
+        learningRate: null,
+        elapsedTime: null,
+        remainingTime: null,
+      });
+      setStatus("training");
+      progressBufferRef.current = null;
+    }
+    rafRef.current = null;
+  }, [setProgress, setStatus]);
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      let msg: WsMessage;
+      try {
+        msg = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+
+      switch (msg.type) {
+        case "progress": {
+          progressBufferRef.current = msg.data;
+          if (rafRef.current === null) {
+            rafRef.current = requestAnimationFrame(flushProgressBuffer);
+          }
+          break;
+        }
+
+        case "status": {
+          const text = msg.data.text;
+          setStatusText(text);
+
+          if (text.startsWith("Error")) {
+            setStatus("error");
+          } else if (text === "Stopped") {
+            setStatus("idle");
+          } else if (text === "Stopping...") {
+            // training thread still winding down
+          } else if (text.startsWith("Starting")) {
+            setStatus("preparing");
+          }
+          break;
+        }
+
+        case "sample": {
+          const d = msg.data;
+          if (d.data) {
+            const mimeType =
+              d.file_type === "IMAGE"
+                ? "image/png"
+                : d.file_type === "VIDEO"
+                  ? "video/mp4"
+                  : "application/octet-stream";
+            const dataUrl = `data:${mimeType};base64,${d.data}`;
+            addSampleUrl(dataUrl);
+          }
+          break;
+        }
+
+        case "sample_progress": {
+          setStatusText(`Sampling: step ${msg.data.step}/${msg.data.max_step}`);
+          break;
+        }
+
+        case "error": {
+          setStatus("error");
+          setError(msg.data.message);
+          break;
+        }
+      }
+    },
+    [setStatus, setStatusText, setError, addSampleUrl, flushProgressBuffer],
+  );
+
+  useReconnectingWebSocket({
+    path: "/ws/training",
+    onMessage: handleMessage,
+    enabled,
+  });
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      progressBufferRef.current = null;
+    };
+  }, []);
+}
diff --git a/web/gui/src/renderer/main.tsx b/web/gui/src/renderer/main.tsx
new file mode 100644
index 000000000..77bd28173
--- /dev/null
+++ b/web/gui/src/renderer/main.tsx
@@ -0,0 +1,35 @@
+import "./styles/globals.css";
+import "./styles/app.css";
+
+import { lazy, StrictMode, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import { applyTheme, getInitialTheme } from "./styles/theme";
+
+applyTheme(getInitialTheme());
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+const params = new URLSearchParams(window.location.search);
+const route = params.get("route");
+
+if (route === "mask-editor") {
+  const MaskEditorPage = lazy(() => import("./pages/MaskEditorPage"));
+  const initialFolder = params.get("folder") ?? undefined;
+
+  createRoot(root).render(
+    <StrictMode>
+      <Suspense fallback={<div className="flex items-center justify-center h-screen">Loading editor...</div>}>
+        <MaskEditorPage initialFolder={initialFolder} />
+      </Suspense>
+    </StrictMode>,
+  );
+} else {
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}
diff --git a/web/gui/src/renderer/pages/ConceptsPage.tsx b/web/gui/src/renderer/pages/ConceptsPage.tsx
new file mode 100644
index 000000000..bb3f05ac5
--- /dev/null
+++ b/web/gui/src/renderer/pages/ConceptsPage.tsx
@@ -0,0 +1,233 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { request } from "@/api/request";
+import { ConceptGrid } from "@/components/concepts/ConceptGrid";
+import { ConceptEditorModal } from "@/components/modals/ConceptEditorModal";
+import { useConfigField } from "@/hooks/useConfigField";
+import { useConfigStore } from "@/store/configStore";
+import type { ConceptConfig } from "@/types/generated/config";
+
+const DEFAULT_CONCEPT: ConceptConfig = {
+  name: "",
+  path: "",
+  seed: 42,
+  enabled: true,
+  type: "STANDARD",
+  include_subdirectories: false,
+  image_variations: 1,
+  text_variations: 1,
+  balancing: 1,
+  balancing_strategy: "REPEATS",
+  loss_weight: 1.0,
+  concept_stats: {},
+  image: {
+    enable_crop_jitter: true,
+    enable_random_flip: false,
+    enable_fixed_flip: false,
+    enable_random_rotate: false,
+    enable_fixed_rotate: false,
+    random_rotate_max_angle: 0,
+    enable_random_brightness: false,
+    enable_fixed_brightness: false,
+    random_brightness_max_strength: 0,
+    enable_random_contrast: false,
+    enable_fixed_contrast: false,
+    random_contrast_max_strength: 0,
+    enable_random_saturation: false,
+    enable_fixed_saturation: false,
+    random_saturation_max_strength: 0,
+    enable_random_hue: false,
+    enable_fixed_hue: false,
+    random_hue_max_strength: 0,
+    enable_resolution_override: false,
+    resolution_override: "512",
+    enable_random_circular_mask_shrink: false,
+    enable_random_mask_rotate_crop: false,
+  },
+  text: {
+    prompt_source: "sample",
+    prompt_path: "",
+    enable_tag_shuffling: false,
+    tag_delimiter: ",",
+    keep_tags_count: 1,
+    tag_dropout_enable: false,
+    tag_dropout_mode: "RANDOM",
+    tag_dropout_probability: 0,
+    tag_dropout_special_tags_mode: "NONE",
+    tag_dropout_special_tags: "",
+    tag_dropout_special_tags_regex: false,
+    caps_randomize_enable: false,
+    caps_randomize_mode: "",
+    caps_randomize_probability: 0,
+    caps_randomize_lowercase: false,
+  },
+};
+
+interface ConceptConfigEntry {
+  name: string;
+  path: string;
+}
+
+export default function ConceptsPage() {
+  const [concepts, setConcepts] = useConfigField<ConceptConfig[] | null>("concepts");
+  const [conceptFileName, setConceptFileName] = useConfigField<string>("concept_file_name");
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [configs, setConfigs] = useState<ConceptConfigEntry[]>([]);
+  const [newConfigName, setNewConfigName] = useState("");
+  const [showNewInput, setShowNewInput] = useState(false);
+  const loadConcepts = useConfigStore((s) => s.loadConcepts);
+  const syncToBackend = useConfigStore((s) => s.syncToBackend);
+
+  const list = useMemo(() => concepts ?? [], [concepts]);
+
+  // Fetch available concept configs
+  useEffect(() => {
+    request<ConceptConfigEntry[]>("/concepts/configs")
+      .then(setConfigs)
+      .catch(() => undefined);
+  }, [conceptFileName]);
+
+  const handleConfigSwitch = useCallback(
+    async (configPath: string) => {
+      setConceptFileName(configPath);
+      // Flush the concept_file_name change to the backend, then reload concepts from the new file
+      await syncToBackend();
+      await loadConcepts();
+    },
+    [setConceptFileName, syncToBackend, loadConcepts],
+  );
+
+  const handleCreateConfig = useCallback(async () => {
+    const trimmed = newConfigName.trim();
+    if (!trimmed) return;
+    try {
+      const created = await request<ConceptConfigEntry>("/concepts/configs", {
+        method: "POST",
+        body: JSON.stringify({ name: trimmed }),
+      });
+      setConfigs((prev) => [...prev, created]);
+      setNewConfigName("");
+      setShowNewInput(false);
+      handleConfigSwitch(created.path);
+    } catch {
+      /* name conflict or invalid */
+    }
+  }, [newConfigName, handleConfigSwitch]);
+
+  const handleAdd = useCallback(() => {
+    const next = [
+      ...list,
+      { ...JSON.parse(JSON.stringify(DEFAULT_CONCEPT)), seed: Math.floor(Math.random() * 2 ** 30) },
+    ];
+    setConcepts(next);
+  }, [list, setConcepts]);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      setConcepts(list.filter((_, i) => i !== index));
+    },
+    [list, setConcepts],
+  );
+
+  const handleClone = useCallback(
+    (index: number) => {
+      const cloned = JSON.parse(JSON.stringify(list[index])) as ConceptConfig;
+      cloned.seed = Math.floor(Math.random() * 2 ** 30);
+      const next = [...list];
+      next.splice(index + 1, 0, cloned);
+      setConcepts(next);
+    },
+    [list, setConcepts],
+  );
+
+  const handleToggle = useCallback(
+    (index: number, enabled: boolean) => {
+      const next = list.map((c, i) => (i === index ? { ...c, enabled } : c));
+      setConcepts(next);
+    },
+    [list, setConcepts],
+  );
+
+  const handleOpen = useCallback((index: number) => {
+    setEditingIndex(index);
+    setEditorOpen(true);
+  }, []);
+
+  const handleSave = useCallback(
+    (updated: ConceptConfig) => {
+      if (editingIndex === null) return;
+      const next = list.map((c, i) => (i === editingIndex ? updated : c));
+      setConcepts(next);
+    },
+    [editingIndex, list, setConcepts],
+  );
+
+  return (
+    <>
+      {configs.length > 0 && (
+        <div className="mb-4 flex items-center gap-3">
+          <select
+            className="h-9 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-secondary)] px-3 text-sm text-[var(--color-on-surface)]"
+            value={conceptFileName ?? ""}
+            onChange={(e) => handleConfigSwitch(e.target.value)}
+          >
+            {configs.map((c) => (
+              <option key={c.path} value={c.path}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+          {showNewInput ? (
+            <div className="flex items-center gap-2">
+              <input
+                className="h-9 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-secondary)] px-3 text-sm text-[var(--color-on-surface)]"
+                placeholder="Config name"
+                value={newConfigName}
+                onChange={(e) => setNewConfigName(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleCreateConfig()}
+                autoFocus
+              />
+              <button
+                className="h-9 rounded-md bg-[var(--color-primary)] px-3 text-sm text-white"
+                onClick={handleCreateConfig}
+              >
+                Create
+              </button>
+              <button
+                className="h-9 rounded-md border border-[var(--color-border)] px-3 text-sm text-[var(--color-on-surface-secondary)]"
+                onClick={() => {
+                  setShowNewInput(false);
+                  setNewConfigName("");
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              className="h-9 rounded-md border border-[var(--color-border)] px-3 text-sm text-[var(--color-on-surface-secondary)] hover:bg-[var(--color-surface-secondary)]"
+              onClick={() => setShowNewInput(true)}
+            >
+              Add Config
+            </button>
+          )}
+        </div>
+      )}
+      <ConceptGrid
+        concepts={list}
+        onAdd={handleAdd}
+        onOpen={handleOpen}
+        onRemove={handleRemove}
+        onClone={handleClone}
+        onToggle={handleToggle}
+      />
+      <ConceptEditorModal
+        open={editorOpen}
+        onClose={() => setEditorOpen(false)}
+        concept={editingIndex !== null ? (list[editingIndex] ?? null) : null}
+        onSave={handleSave}
+      />
+    </>
+  );
+}
diff --git a/web/gui/src/renderer/pages/EmbeddingsPage.tsx b/web/gui/src/renderer/pages/EmbeddingsPage.tsx
new file mode 100644
index 000000000..89d9eafc9
--- /dev/null
+++ b/web/gui/src/renderer/pages/EmbeddingsPage.tsx
@@ -0,0 +1,75 @@
+import { useCallback, useMemo } from "react";
+
+import { EmbeddingList } from "@/components/embeddings/EmbeddingList";
+import { SectionCard } from "@/components/shared";
+import { useConfigField } from "@/hooks/useConfigField";
+import type { TrainEmbeddingConfig } from "@/types/generated/config";
+
+const DEFAULT_EMBEDDING: Omit<TrainEmbeddingConfig, "uuid"> = {
+  model_name: "",
+  placeholder: "<embedding>",
+  train: true,
+  stop_training_after: null,
+  stop_training_after_unit: "NEVER",
+  token_count: null,
+  initial_embedding_text: "",
+  is_output_embedding: false,
+};
+
+function newUuid(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2, 10)}`;
+}
+
+const newEmbedding = (): TrainEmbeddingConfig => ({
+  ...JSON.parse(JSON.stringify(DEFAULT_EMBEDDING)),
+  uuid: newUuid(),
+});
+
+export default function EmbeddingsPage() {
+  const [embeddings, setEmbeddings] = useConfigField<TrainEmbeddingConfig[] | null>("additional_embeddings");
+  const list = useMemo<TrainEmbeddingConfig[]>(() => embeddings ?? [], [embeddings]);
+
+  const handleAdd = useCallback(() => {
+    setEmbeddings([...list, newEmbedding()]);
+  }, [list, setEmbeddings]);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      setEmbeddings(list.filter((_, i) => i !== index));
+    },
+    [list, setEmbeddings],
+  );
+
+  const handleClone = useCallback(
+    (index: number) => {
+      const cloned = JSON.parse(JSON.stringify(list[index])) as TrainEmbeddingConfig;
+      cloned.uuid = newUuid();
+      const next = [...list];
+      next.splice(index + 1, 0, cloned);
+      setEmbeddings(next);
+    },
+    [list, setEmbeddings],
+  );
+
+  const handleToggleTrain = useCallback(
+    (index: number, value: boolean) => {
+      setEmbeddings(list.map((e, i) => (i === index ? { ...e, train: value } : e)));
+    },
+    [list, setEmbeddings],
+  );
+
+  return (
+    <SectionCard title="Additional Embeddings">
+      <EmbeddingList
+        embeddings={list}
+        onAdd={handleAdd}
+        onClone={handleClone}
+        onRemove={handleRemove}
+        onToggleTrain={handleToggleTrain}
+      />
+    </SectionCard>
+  );
+}
diff --git a/web/gui/src/renderer/pages/HelpPage.tsx b/web/gui/src/renderer/pages/HelpPage.tsx
new file mode 100644
index 000000000..f9865bc13
--- /dev/null
+++ b/web/gui/src/renderer/pages/HelpPage.tsx
@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { configApi } from "@/api/configApi";
+import { markdownToHtml, sanitizeHtml } from "@/utils/markdown";
+
+interface WikiSection {
+  title: string;
+  pages: string[];
+}
+
+function formatPageName(slug: string): string {
+  return slug.replace(/-/g, " ").replace("F.A.Q.", "FAQ");
+}
+
+const FALLBACK_SECTIONS: WikiSection[] = [
+  {
+    title: "Getting Started",
+    pages: ["Home", "Onboarding-Guide-for-Newcomers", "The-Program"],
+  },
+  {
+    title: "Configuration",
+    pages: ["General", "Model", "Data", "Concepts", "Training"],
+  },
+  {
+    title: "Training",
+    pages: ["Optimizers", "Advanced-Optimizers", "Custom-Scheduler"],
+  },
+  {
+    title: "Methods",
+    pages: ["LoRA", "Embedding", "Additional-Embeddings"],
+  },
+  {
+    title: "Guides & FAQ",
+    pages: ["F.A.Q.", "Lessons-Learnt-and-Tutorials"],
+  },
+];
+
+export default function HelpPage() {
+  const [sections, setSections] = useState<WikiSection[]>([]);
+  const [activePage, setActivePage] = useState<string>("Home");
+  const [content, setContent] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch the page list on mount
+  useEffect(() => {
+    let cancelled = false;
+    const fetchPages = async () => {
+      try {
+        const data = await configApi.wikiPages();
+        if (!cancelled) {
+          setSections(data as WikiSection[]);
+        }
+      } catch {
+        if (!cancelled) {
+          setSections(FALLBACK_SECTIONS);
+        }
+      }
+    };
+    fetchPages();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Fetch a specific page
+  const fetchPage = useCallback(async (slug: string) => {
+    setLoading(true);
+    setError(null);
+    setActivePage(slug);
+    try {
+      const data = await configApi.wikiPage(slug);
+      setContent(data.content);
+    } catch {
+      setError(`Failed to load "${formatPageName(slug)}". Check your connection and try again.`);
+      setContent("");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load the default page on mount (or when sections arrive)
+  useEffect(() => {
+    if (sections.length > 0 && sections[0].pages.length > 0) {
+      fetchPage(sections[0].pages[0]);
+    }
+  }, [sections, fetchPage]);
+
+  // Convert markdown content to HTML, then sanitize to prevent XSS
+  const renderedHtml = useMemo(() => {
+    if (!content) return "";
+    const rawHtml = markdownToHtml(content);
+    return sanitizeHtml(rawHtml);
+  }, [content]);
+
+  return (
+    <div className="flex gap-0 min-h-[calc(100vh-200px)]">
+      <nav className="flex-shrink-0 border-r w-[260px] border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] rounded-l-[var(--radius-sm)] overflow-y-auto">
+        <div className="py-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wider px-4 pb-3 m-0 text-[var(--color-on-surface-secondary)] border-b border-[var(--color-border-subtle)]">
+            Documentation
+          </h3>
+          {sections.map((section) => (
+            <div key={section.title} className="mt-3">
+              <div className="text-xs font-semibold uppercase tracking-wider px-4 py-1 pb-1.5 text-[var(--color-on-surface-secondary)] opacity-70">
+                {section.title}
+              </div>
+              <ul className="list-none m-0 p-0">
+                {section.pages.map((slug) => (
+                  <li key={slug}>
+                    <button
+                      onClick={() => fetchPage(slug)}
+                      className={`help-nav-link text-sm block w-full text-left py-[5px] px-4 pl-6 border-none cursor-pointer transition-[background-color,color] duration-200 ease-out ${
+                        activePage === slug ? "help-nav-link-active" : ""
+                      }`}
+                    >
+                      {formatPageName(slug)}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </nav>
+
+      <div className="flex-1 bg-[var(--color-surface-raised)] rounded-r-[var(--radius-sm)] px-8 py-6 overflow-y-auto min-w-0">
+        {loading && (
+          <div className="text-center py-12">
+            <div className="skeleton w-[200px] h-6 mx-auto mb-4 rounded-md" />
+            <div className="skeleton w-4/5 h-4 mx-auto mb-2 rounded" />
+            <div className="skeleton w-3/5 h-4 mx-auto mb-2 rounded" />
+            <div className="skeleton w-[70%] h-4 mx-auto rounded" />
+          </div>
+        )}
+
+        {error && !loading && (
+          <div className="p-6 bg-[var(--color-error-500-alpha-08)] border border-[var(--color-error-500-alpha-20)] rounded-[var(--radius-sm)] text-[var(--color-error-500)] text-center">
+            <p className="m-0 mb-3 font-medium">{error}</p>
+            <button onClick={() => fetchPage(activePage)} className="action-button text-caption">
+              Retry
+            </button>
+          </div>
+        )}
+
+        {!loading && !error && renderedHtml && (
+          <div className="wiki-content" dangerouslySetInnerHTML={{ __html: renderedHtml }} />
+        )}
+
+        {!loading && !error && !renderedHtml && (
+          <div className="text-center py-12 text-[var(--color-on-surface-secondary)]">
+            <p>Select a page from the sidebar to get started.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/pages/MaskEditorPage.tsx b/web/gui/src/renderer/pages/MaskEditorPage.tsx
new file mode 100644
index 000000000..746a1a827
--- /dev/null
+++ b/web/gui/src/renderer/pages/MaskEditorPage.tsx
@@ -0,0 +1,440 @@
+import {
+  Check,
+  ChevronRight,
+  Eraser,
+  FileText,
+  Loader2,
+  MousePointerClick,
+  Paintbrush,
+  Pentagon,
+  Redo2,
+  RotateCcw,
+  Save,
+  Search,
+  Undo2,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { configApi } from "@/api/configApi";
+import { type CapabilitiesResponse, toolsApi } from "@/api/toolsApi";
+import { MaskEditorCanvas, type MaskEditorCanvasHandle } from "@/components/mask-editor/MaskEditorCanvas";
+import { Button, DirPicker, FilePicker, SliderEntry, Toggle } from "@/components/shared";
+import { type MaskTool, useMaskEditor } from "@/hooks/useMaskEditor";
+
+interface MaskEditorPageProps {
+  initialFolder?: string;
+}
+
+export default function MaskEditorPage({ initialFolder }: MaskEditorPageProps) {
+  const { state, update, loadImages, selectImage, maskCanvasRef, pushUndo, undo, redo, runYolo, saveMask } =
+    useMaskEditor(initialFolder);
+
+  const [hoveredDetection, setHoveredDetection] = useState<number | null>(null);
+  const [capabilities, setCapabilities] = useState<CapabilitiesResponse | null>(null);
+  const [yoloPanelOpen, setYoloPanelOpen] = useState(true);
+  const canvasHandleRef = useRef<MaskEditorCanvasHandle | null>(null);
+
+  // Caption editor state
+  const [caption, setCaption] = useState<string>("");
+  const [captionDirty, setCaptionDirty] = useState(false);
+  const [captionSaving, setCaptionSaving] = useState(false);
+  const captionRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Load caption when current image changes
+  useEffect(() => {
+    setCaptionDirty(false);
+    if (!state.currentImagePath) {
+      setCaption("");
+      return;
+    }
+    const idx = state.currentImagePath.lastIndexOf(".");
+    const txtPath = idx >= 0 ? `${state.currentImagePath.slice(0, idx)}.txt` : `${state.currentImagePath}.txt`;
+    let cancelled = false;
+    configApi
+      .conceptTextFile(txtPath)
+      .then((res) => {
+        if (!cancelled) setCaption(res.content ?? "");
+      })
+      .catch(() => {
+        if (!cancelled) setCaption("");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.currentImagePath]);
+
+  const saveCaption = useCallback(async () => {
+    if (!state.currentImagePath || !captionDirty) return;
+    setCaptionSaving(true);
+    try {
+      await configApi.saveCaption(state.currentImagePath, caption);
+      setCaptionDirty(false);
+    } catch (e) {
+      alert(`Failed to save caption: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setCaptionSaving(false);
+    }
+  }, [state.currentImagePath, caption, captionDirty]);
+
+  const navigate = useCallback(
+    (delta: number) => {
+      if (!state.currentImagePath) return;
+      const idx = state.images.findIndex((img) => img.path === state.currentImagePath);
+      if (idx < 0) return;
+      const next = state.images[Math.max(0, Math.min(state.images.length - 1, idx + delta))];
+      if (!next || next.path === state.currentImagePath) return;
+      if ((state.maskModified || captionDirty) && !confirm("Unsaved changes. Continue?")) return;
+      selectImage(next.path);
+    },
+    [state.currentImagePath, state.images, state.maskModified, captionDirty, selectImage],
+  );
+
+  useEffect(() => {
+    toolsApi
+      .getCapabilities()
+      .then(setCapabilities)
+      .catch(() => {
+        /* ignore */
+      });
+  }, []);
+
+  useEffect(() => {
+    if (state.folder) loadImages(state.folder, state.includeSubdirs);
+  }, [state.folder, state.includeSubdirs, loadImages]);
+
+  useEffect(() => {
+    if (initialFolder) {
+      update("folder", initialFolder);
+    }
+  }, [initialFolder, update]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      const inEditor =
+        target && (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.isContentEditable);
+
+      if (e.ctrlKey && e.key === "z") {
+        e.preventDefault();
+        undo();
+      } else if (e.ctrlKey && e.key === "y") {
+        e.preventDefault();
+        redo();
+      } else if (e.ctrlKey && e.key === "s") {
+        e.preventDefault();
+        saveMask();
+        if (captionDirty) void saveCaption();
+      } else if (!inEditor && (e.key === "ArrowDown" || e.key === "ArrowRight")) {
+        e.preventDefault();
+        navigate(1);
+      } else if (!inEditor && (e.key === "ArrowUp" || e.key === "ArrowLeft")) {
+        e.preventDefault();
+        navigate(-1);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [undo, redo, saveMask, navigate, saveCaption, captionDirty]);
+
+  const handleCanvasReady = useCallback((handle: MaskEditorCanvasHandle) => {
+    canvasHandleRef.current = handle;
+  }, []);
+
+  const handleAcceptDetection = (index: number) => {
+    const det = state.yoloDetections[index];
+    if (det && canvasHandleRef.current) {
+      canvasHandleRef.current.acceptDetection(det);
+    }
+  };
+
+  const toolButtons: Array<{ tool: MaskTool; icon: typeof Paintbrush; label: string }> = [
+    { tool: "brush", icon: Paintbrush, label: "Brush" },
+    { tool: "eraser", icon: Eraser, label: "Eraser" },
+    { tool: "polygon", icon: Pentagon, label: "Polygon" },
+  ];
+
+  return (
+    <div className="flex h-screen bg-[var(--color-surface)] text-[var(--color-on-surface)]">
+      <div className="w-64 flex-shrink-0 border-r border-[var(--color-border-subtle)] flex flex-col bg-[var(--color-surface-elevated)]">
+        <div className="p-3 border-b border-[var(--color-border-subtle)] flex flex-col gap-2">
+          <DirPicker label="Folder" value={state.folder} onChange={(v) => update("folder", v)} />
+          <Toggle
+            label="Include subfolders"
+            value={state.includeSubdirs}
+            onChange={(v) => update("includeSubdirs", v)}
+          />
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {state.images.length === 0 && state.folder && (
+            <p className="p-3 text-xs text-[var(--color-on-surface-secondary)]">No images found</p>
+          )}
+          {state.images.map((img) => (
+            <button
+              key={img.path}
+              type="button"
+              onClick={() => {
+                if (state.maskModified && !confirm("Unsaved changes. Continue?")) return;
+                selectImage(img.path);
+              }}
+              className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 hover:bg-[var(--color-border-subtle)]/50 transition-colors ${
+                state.currentImagePath === img.path
+                  ? "bg-[var(--color-cobalt-600)]/10 border-l-2 border-[var(--color-cobalt-600)]"
+                  : ""
+              }`}
+            >
+              {img.has_mask && <span className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />}
+              <span className="truncate">{img.filename}</span>
+            </button>
+          ))}
+        </div>
+        <div className="p-2 border-t border-[var(--color-border-subtle)] text-xs text-[var(--color-on-surface-secondary)]">
+          {state.images.length} images
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex items-center gap-2 p-2 border-b border-[var(--color-border-subtle)] bg-[var(--color-surface-elevated)] flex-shrink-0">
+          {toolButtons.map(({ tool: t, icon: Icon, label }) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => update("tool", t)}
+              title={label}
+              className={`p-2 rounded-[var(--radius-sm)] transition-colors ${
+                state.tool === t ? "bg-[var(--color-cobalt-600)] text-white" : "hover:bg-[var(--color-border-subtle)]"
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+            </button>
+          ))}
+
+          <div className="w-px h-6 bg-[var(--color-border-subtle)] mx-1" />
+
+          {(state.tool === "brush" || state.tool === "eraser") && (
+            <div className="w-40">
+              <SliderEntry
+                label="Size"
+                value={state.brushSize}
+                onChange={(v) => update("brushSize", v)}
+                min={1}
+                max={100}
+                step={1}
+              />
+            </div>
+          )}
+
+          <div className="w-px h-6 bg-[var(--color-border-subtle)] mx-1" />
+
+          <button
+            type="button"
+            onClick={undo}
+            title="Undo (Ctrl+Z)"
+            className="p-2 rounded-[var(--radius-sm)] hover:bg-[var(--color-border-subtle)] disabled:opacity-30"
+          >
+            <Undo2 className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            onClick={redo}
+            title="Redo (Ctrl+Y)"
+            className="p-2 rounded-[var(--radius-sm)] hover:bg-[var(--color-border-subtle)] disabled:opacity-30"
+          >
+            <Redo2 className="w-4 h-4" />
+          </button>
+
+          <div className="w-px h-6 bg-[var(--color-border-subtle)] mx-1" />
+
+          <span className="text-xs text-[var(--color-on-surface-secondary)] tabular-nums">
+            {Math.round(state.zoom * 100)}%
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              update("zoom", 1);
+              update("panOffset", { x: 0, y: 0 });
+            }}
+            title="Reset zoom"
+            className="p-2 rounded-[var(--radius-sm)] hover:bg-[var(--color-border-subtle)]"
+          >
+            <RotateCcw className="w-4 h-4" />
+          </button>
+
+          <div className="flex-1" />
+
+          <div className="flex items-center gap-2">
+            <div className="w-28">
+              <SliderEntry
+                label="Smooth"
+                value={state.smooth}
+                onChange={(v) => update("smooth", v)}
+                min={0}
+                max={20}
+                step={1}
+              />
+            </div>
+            <div className="w-28">
+              <SliderEntry
+                label="Expand"
+                value={state.expand}
+                onChange={(v) => update("expand", v)}
+                min={0}
+                max={20}
+                step={1}
+              />
+            </div>
+          </div>
+
+          <div className="w-px h-6 bg-[var(--color-border-subtle)] mx-1" />
+
+          <Button variant="primary" onClick={saveMask} disabled={!state.maskModified || state.saving}>
+            {state.saving ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Save className="w-4 h-4 mr-1" />}
+            Save
+          </Button>
+        </div>
+
+        <MaskEditorCanvas
+          imagePath={state.currentImagePath}
+          tool={state.tool}
+          brushSize={state.brushSize}
+          zoom={state.zoom}
+          panOffset={state.panOffset}
+          onZoomChange={(z) => update("zoom", z)}
+          onPanChange={(p) => update("panOffset", p)}
+          maskCanvasRef={maskCanvasRef}
+          onBeforeStroke={pushUndo}
+          yoloDetections={state.yoloDetections}
+          hoveredDetection={hoveredDetection}
+          onReady={handleCanvasReady}
+        />
+
+        {state.currentImagePath && (
+          <div className="border-t border-[var(--color-border-subtle)] bg-[var(--color-surface-elevated)] p-3 flex flex-col gap-2 max-h-[40vh]">
+            <div className="flex items-center gap-2 text-xs text-[var(--color-on-surface-secondary)]">
+              <FileText className="w-3.5 h-3.5" />
+              <span className="truncate flex-1">
+                Caption:{" "}
+                {state.currentImagePath
+                  .split(/[/\\]/)
+                  .pop()
+                  ?.replace(/\.[^.]+$/, "")}
+                .txt
+              </span>
+              {captionDirty && <span className="text-[var(--color-cobalt-600)]">(unsaved)</span>}
+              <Button variant="primary" size="sm" onClick={saveCaption} disabled={!captionDirty || captionSaving}>
+                {captionSaving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                <span className="ml-1">Save Caption</span>
+              </Button>
+            </div>
+            <textarea
+              ref={captionRef}
+              value={caption}
+              onChange={(e) => {
+                setCaption(e.target.value);
+                setCaptionDirty(true);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+                  e.preventDefault();
+                  void saveCaption();
+                }
+              }}
+              placeholder="Enter caption for this image. Ctrl+Enter to save."
+              className="w-full min-h-[80px] flex-1 resize-y rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface-raised)] p-2 text-sm font-mono text-[var(--color-on-surface)]"
+              spellCheck={false}
+            />
+          </div>
+        )}
+      </div>
+
+      <div
+        className={`flex-shrink-0 border-l border-[var(--color-border-subtle)] bg-[var(--color-surface-elevated)] transition-all ${
+          yoloPanelOpen ? "w-72" : "w-10"
+        }`}
+      >
+        <button
+          type="button"
+          onClick={() => setYoloPanelOpen(!yoloPanelOpen)}
+          className="w-full p-2 flex items-center justify-center hover:bg-[var(--color-border-subtle)]"
+          title={yoloPanelOpen ? "Collapse YOLO panel" : "Expand YOLO panel"}
+        >
+          <ChevronRight className={`w-4 h-4 transition-transform ${yoloPanelOpen ? "rotate-180" : ""}`} />
+        </button>
+
+        {yoloPanelOpen && (
+          <div className="p-3 flex flex-col gap-3">
+            <h3 className="text-sm font-semibold flex items-center gap-1">
+              <MousePointerClick className="w-4 h-4" /> YOLO Detection
+            </h3>
+
+            {capabilities && !capabilities.ultralytics_available && (
+              <div className="p-2 rounded-[var(--radius-sm)] bg-[var(--color-error-500)]/10 border border-[var(--color-error-500)]/30">
+                <p className="text-xs text-[var(--color-error-500)]">
+                  Ultralytics not installed.
+                  <br />
+                  <code className="text-[10px]">pip install ultralytics</code>
+                </p>
+              </div>
+            )}
+
+            <FilePicker
+              label="Model File"
+              value={state.yoloModelPath}
+              onChange={(v) => update("yoloModelPath", v)}
+              filters={[{ name: "YOLO Models", extensions: ["pt"] }]}
+              tooltip="Select a YOLO .pt model for object detection"
+            />
+
+            <Button
+              variant="secondary"
+              onClick={runYolo}
+              disabled={
+                !state.currentImagePath ||
+                !state.yoloModelPath ||
+                state.yoloLoading ||
+                (capabilities !== null && !capabilities.ultralytics_available)
+              }
+            >
+              {state.yoloLoading ? (
+                <Loader2 className="w-4 h-4 animate-spin mr-1" />
+              ) : (
+                <Search className="w-4 h-4 mr-1" />
+              )}
+              Find Objects
+            </Button>
+
+            {state.yoloDetections.length > 0 && (
+              <div className="flex flex-col gap-1 max-h-80 overflow-y-auto">
+                <p className="text-xs text-[var(--color-on-surface-secondary)]">
+                  {state.yoloDetections.length} detections
+                </p>
+                {state.yoloDetections.map((det, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-2 p-2 rounded-[var(--radius-sm)] border border-[var(--color-border-subtle)] hover:bg-[var(--color-border-subtle)]/50 cursor-pointer"
+                    onMouseEnter={() => setHoveredDetection(i)}
+                    onMouseLeave={() => setHoveredDetection(null)}
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{det.class_name}</p>
+                      <p className="text-xs text-[var(--color-on-surface-secondary)]">
+                        {(det.confidence * 100).toFixed(1)}%
+                      </p>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleAcceptDetection(i)}
+                      title="Accept detection as mask"
+                      className="p-1 rounded-[var(--radius-sm)] text-green-500 hover:bg-green-500/10"
+                    >
+                      <Check className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/pages/PerformancePage.tsx b/web/gui/src/renderer/pages/PerformancePage.tsx
new file mode 100644
index 000000000..a189d1f33
--- /dev/null
+++ b/web/gui/src/renderer/pages/PerformancePage.tsx
@@ -0,0 +1,553 @@
+import { memo, useCallback, useMemo, useState } from "react";
+
+import { useReconnectingWebSocket } from "@/hooks/useReconnectingWebSocket";
+import { useUiStore } from "@/store/uiStore";
+import { formatValue, generateTicks } from "@/utils/chartUtils";
+
+interface GpuMetrics {
+  index: number;
+  name: string;
+  vram_used_mb: number;
+  vram_total_mb: number;
+  vram_percent: number;
+  temperature: number | null;
+  utilization: number | null;
+}
+
+interface MetricsSnapshot {
+  cpu_percent: number;
+  ram_used_gb: number;
+  ram_total_gb: number;
+  ram_percent: number;
+  gpus: GpuMetrics[];
+}
+
+interface TimestampedMetrics extends MetricsSnapshot {
+  timestamp: number;
+}
+
+const MAX_POINTS = 300;
+
+const CHART_WIDTH = 520;
+const CHART_HEIGHT = 260;
+const CHART_PADDING = { top: 24, right: 16, bottom: 36, left: 64 };
+
+const LINE_COLOR = "var(--color-cobalt-600)";
+const GRID_COLOR = "var(--color-border-subtle)";
+const TEXT_COLOR = "var(--color-on-surface-secondary)";
+const AXIS_COLOR = "var(--color-on-surface-secondary)";
+
+const GPU_COLORS = [
+  "var(--color-cobalt-600)",
+  "var(--color-azure-500)",
+  "var(--color-success-500)",
+  "var(--color-warning-500)",
+  "var(--color-info-500)",
+  "var(--color-error-500)",
+];
+
+function formatTime(secondsAgo: number): string {
+  if (secondsAgo < 60) return `${Math.round(secondsAgo)}s`;
+  return `${Math.floor(secondsAgo / 60)}m${Math.round(secondsAgo % 60)}s`;
+}
+
+interface UseSystemWebSocketResult {
+  connected: boolean;
+  latest: MetricsSnapshot | null;
+  history: TimestampedMetrics[];
+}
+
+function useSystemWebSocket(): UseSystemWebSocketResult {
+  const backendConnected = useUiStore((s) => s.backendConnected);
+  const [connected, setConnected] = useState(false);
+  const [latest, setLatest] = useState<MetricsSnapshot | null>(null);
+  const [history, setHistory] = useState<TimestampedMetrics[]>([]);
+
+  const handleMessage = useCallback((event: MessageEvent) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === "metrics" && msg.data) {
+        const snapshot: MetricsSnapshot = msg.data;
+        const timestamped: TimestampedMetrics = {
+          ...snapshot,
+          timestamp: Date.now() / 1000,
+        };
+
+        setLatest(snapshot);
+        setHistory((prev) => {
+          const next = [...prev, timestamped];
+          if (next.length > MAX_POINTS) {
+            return next.slice(next.length - MAX_POINTS);
+          }
+          return next;
+        });
+      }
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  useReconnectingWebSocket({
+    path: "/ws/system",
+    onMessage: handleMessage,
+    onOpen: () => setConnected(true),
+    onClose: () => setConnected(false),
+    enabled: backendConnected,
+  });
+
+  return { connected, latest, history };
+}
+
+interface ChartPoint {
+  time: number;
+  value: number;
+}
+
+interface MetricChartProps {
+  title: string;
+  points: ChartPoint[];
+  unit: string;
+  color?: string;
+  area?: boolean;
+  yMax?: number;
+  yMin?: number;
+}
+
+const MetricChart = memo(function MetricChart({
+  title,
+  points,
+  unit,
+  color = LINE_COLOR,
+  area = false,
+  yMax: fixedYMax,
+  yMin: fixedYMin,
+}: MetricChartProps) {
+  if (points.length === 0) {
+    return (
+      <div className="card card-static p-4">
+        <h4 className="m-0 mb-2 text-caption font-semibold text-[var(--color-on-surface)]">{title}</h4>
+        <div
+          className="flex items-center justify-center text-[var(--color-on-surface-secondary)] text-caption"
+          style={{ height: CHART_HEIGHT }}
+        >
+          Waiting for data...
+        </div>
+      </div>
+    );
+  }
+
+  const times = points.map((p) => p.time);
+  const values = points.map((p) => p.value);
+  const minTime = Math.min(...times);
+  const maxTime = Math.max(...times);
+
+  const rawMinVal = Math.min(...values);
+  const rawMaxVal = Math.max(...values);
+
+  const yMin = fixedYMin !== undefined ? fixedYMin : Math.max(0, rawMinVal - (rawMaxVal - rawMinVal) * 0.05);
+  const yMax = fixedYMax !== undefined ? fixedYMax : rawMaxVal + (rawMaxVal - rawMinVal) * 0.05 || 1;
+
+  const timeRange = maxTime - minTime || 1;
+
+  const plotW = CHART_WIDTH - CHART_PADDING.left - CHART_PADDING.right;
+  const plotH = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
+
+  const xScale = (time: number) => CHART_PADDING.left + ((time - minTime) / timeRange) * plotW;
+  const yScale = (val: number) => CHART_PADDING.top + plotH - ((val - yMin) / (yMax - yMin)) * plotH;
+
+  const pathParts = points.map((p, i) => {
+    const x = xScale(p.time);
+    const y = yScale(p.value);
+    return `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`;
+  });
+  const linePath = pathParts.join(" ");
+
+  const areaPath =
+    `${linePath} L${xScale(points[points.length - 1].time).toFixed(2)},${(CHART_PADDING.top + plotH).toFixed(2)}` +
+    ` L${xScale(points[0].time).toFixed(2)},${(CHART_PADDING.top + plotH).toFixed(2)} Z`;
+
+  const xTicks = generateTicks(0, maxTime - minTime, 5);
+  const yTicks = generateTicks(yMin, yMax, 5);
+
+  const latestValue = points[points.length - 1].value;
+  const gradId = `perf-area-${title.replace(/[^a-zA-Z0-9]/g, "-")}`;
+
+  return (
+    <div className="card card-static p-4">
+      <div className="flex justify-between items-baseline mb-2">
+        <h4 className="m-0 text-caption font-semibold text-[var(--color-on-surface)]">{title}</h4>
+        <span className="mono tabular-nums text-micro font-semibold" style={{ color }}>
+          {formatValue(latestValue)} {unit}
+        </span>
+      </div>
+      <svg
+        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
+        width="100%"
+        className="block"
+        role="img"
+        aria-label={`${title} chart`}
+      >
+        <title>{title}</title>
+        {yTicks.map((tick) => {
+          const y = yScale(tick);
+          return (
+            <line
+              key={`yg-${tick}`}
+              x1={CHART_PADDING.left}
+              y1={y}
+              x2={CHART_WIDTH - CHART_PADDING.right}
+              y2={y}
+              stroke={GRID_COLOR}
+              strokeWidth="0.5"
+              strokeDasharray="4,3"
+            />
+          );
+        })}
+
+        {area && (
+          <>
+            <defs>
+              <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={color} stopOpacity="0.2" />
+                <stop offset="100%" stopColor={color} stopOpacity="0.02" />
+              </linearGradient>
+            </defs>
+            <path d={areaPath} fill={`url(#${gradId})`} />
+          </>
+        )}
+
+        <path d={linePath} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
+
+        {xTicks.map((tick) => {
+          const x = xScale(minTime + tick);
+          if (x < CHART_PADDING.left || x > CHART_WIDTH - CHART_PADDING.right) return null;
+          return (
+            <text
+              key={`xl-${tick}`}
+              x={x}
+              y={CHART_HEIGHT - 6}
+              textAnchor="middle"
+              fill={TEXT_COLOR}
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
+              {formatTime(tick)}
+            </text>
+          );
+        })}
+
+        {yTicks.map((tick) => {
+          const y = yScale(tick);
+          if (y < CHART_PADDING.top || y > CHART_PADDING.top + plotH) return null;
+          return (
+            <text
+              key={`yl-${tick}`}
+              x={CHART_PADDING.left - 6}
+              y={y + 3}
+              textAnchor="end"
+              fill={TEXT_COLOR}
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
+              {formatValue(tick)}
+            </text>
+          );
+        })}
+
+        <text
+          x={CHART_PADDING.left + plotW / 2}
+          y={CHART_HEIGHT - 0}
+          textAnchor="middle"
+          fill={AXIS_COLOR}
+          fontSize="9"
+          fontFamily="var(--font-sans)"
+        >
+          time
+        </text>
+
+        <line
+          x1={CHART_PADDING.left}
+          y1={CHART_PADDING.top}
+          x2={CHART_PADDING.left}
+          y2={CHART_PADDING.top + plotH}
+          stroke={AXIS_COLOR}
+          strokeWidth="0.5"
+          opacity="0.5"
+        />
+        <line
+          x1={CHART_PADDING.left}
+          y1={CHART_PADDING.top + plotH}
+          x2={CHART_WIDTH - CHART_PADDING.right}
+          y2={CHART_PADDING.top + plotH}
+          stroke={AXIS_COLOR}
+          strokeWidth="0.5"
+          opacity="0.5"
+        />
+
+        <text
+          x={CHART_WIDTH - CHART_PADDING.right}
+          y={CHART_PADDING.top - 8}
+          textAnchor="end"
+          fill={TEXT_COLOR}
+          fontSize="8"
+          fontFamily="var(--font-mono)"
+          opacity="0.6"
+        >
+          {points.length} pts
+        </text>
+      </svg>
+    </div>
+  );
+});
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  subtext?: string;
+  color?: string;
+}
+
+function StatCard({ label, value, subtext, color }: StatCardProps) {
+  return (
+    <div className="bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] p-4 flex flex-col gap-1">
+      <span className="text-label font-medium text-[var(--color-on-surface-secondary)] uppercase tracking-wider">
+        {label}
+      </span>
+      <span
+        className="mono tabular-nums text-2xl font-bold leading-tight"
+        style={{ color: color ?? "var(--color-on-surface)" }}
+      >
+        {value}
+      </span>
+      {subtext && (
+        <span className="mono tabular-nums text-label text-[var(--color-on-surface-secondary)]">{subtext}</span>
+      )}
+    </div>
+  );
+}
+
+function extractTimeSeries(
+  history: TimestampedMetrics[],
+  accessor: (m: TimestampedMetrics) => number | null | undefined,
+): ChartPoint[] {
+  if (history.length === 0) return [];
+
+  const startTime = history[0].timestamp;
+  const points: ChartPoint[] = [];
+
+  for (const m of history) {
+    const val = accessor(m);
+    if (val !== null && val !== undefined) {
+      points.push({ time: m.timestamp - startTime, value: val });
+    }
+  }
+
+  return points;
+}
+
+export default function PerformancePage() {
+  const { connected, latest, history } = useSystemWebSocket();
+
+  const cpuPoints = useMemo(() => extractTimeSeries(history, (m) => m.cpu_percent), [history]);
+  const ramPoints = useMemo(() => extractTimeSeries(history, (m) => m.ram_used_gb), [history]);
+
+  const gpuCount = latest?.gpus.length ?? 0;
+
+  // Extract all per-GPU series (VRAM/utilization/temperature) in a single pass over `history`
+  // so that appending one new sample doesn't trigger 3xgpuCount independent O(history) rebuilds
+  // on every render. This recomputes only when `history` or `gpuCount` actually changes (e.g. not
+  // when `connected` toggles independently).
+  const gpuSeries = useMemo(
+    () =>
+      Array.from({ length: gpuCount }, (_, gpuIdx) => ({
+        vram: extractTimeSeries(history, (m) => m.gpus[gpuIdx]?.vram_used_mb ?? null),
+        utilization: extractTimeSeries(history, (m) => m.gpus[gpuIdx]?.utilization ?? null),
+        temperature: extractTimeSeries(history, (m) => m.gpus[gpuIdx]?.temperature ?? null),
+      })),
+    [history, gpuCount],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="card card-static p-4">
+        <div className="flex items-center gap-4 flex-wrap">
+          <span className="text-caption font-semibold text-[var(--color-on-surface)]">System Monitor</span>
+
+          <span
+            className={`text-label inline-flex items-center gap-1 ${
+              connected ? "text-[var(--color-success-500)]" : "text-[var(--color-on-surface-secondary)]"
+            }`}
+          >
+            <span
+              className={`w-1.5 h-1.5 rounded-full inline-block ${
+                connected ? "bg-[var(--color-success-500)]" : "bg-[var(--color-on-surface-secondary)]"
+              }`}
+              style={{
+                animation: connected ? "pulseAlive 2s infinite" : "none",
+              }}
+            />
+            {connected ? "Live (1s interval)" : "Connecting..."}
+          </span>
+
+          {history.length > 0 && (
+            <span className="mono tabular-nums text-label text-[var(--color-on-surface-secondary)] ml-auto">
+              {history.length}/{MAX_POINTS} samples
+            </span>
+          )}
+        </div>
+      </div>
+
+      {latest && (
+        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3">
+          <StatCard
+            label="CPU"
+            value={`${latest.cpu_percent.toFixed(1)}%`}
+            color={
+              latest.cpu_percent > 90
+                ? "var(--color-error-500)"
+                : latest.cpu_percent > 70
+                  ? "var(--color-warning-500)"
+                  : "var(--color-success-500)"
+            }
+          />
+          <StatCard
+            label="RAM"
+            value={`${latest.ram_used_gb.toFixed(1)} GB`}
+            subtext={`/ ${latest.ram_total_gb.toFixed(1)} GB (${latest.ram_percent.toFixed(0)}%)`}
+            color={
+              latest.ram_percent > 90
+                ? "var(--color-error-500)"
+                : latest.ram_percent > 70
+                  ? "var(--color-warning-500)"
+                  : "var(--color-on-surface)"
+            }
+          />
+          {latest.gpus.map((gpu) => (
+            <StatCard
+              key={gpu.index}
+              label={`GPU ${gpu.index} VRAM`}
+              value={`${(gpu.vram_used_mb / 1024).toFixed(1)} GB`}
+              subtext={`/ ${(gpu.vram_total_mb / 1024).toFixed(1)} GB (${gpu.vram_percent.toFixed(0)}%) - ${gpu.name}`}
+              color={
+                gpu.vram_percent > 90
+                  ? "var(--color-error-500)"
+                  : gpu.vram_percent > 70
+                    ? "var(--color-warning-500)"
+                    : "var(--color-cobalt-600)"
+              }
+            />
+          ))}
+          {latest.gpus.map(
+            (gpu) =>
+              gpu.temperature !== null && (
+                <StatCard
+                  key={`temp-${gpu.index}`}
+                  label={`GPU ${gpu.index} Temp`}
+                  value={`${gpu.temperature.toFixed(0)}\u00B0C`}
+                  color={
+                    gpu.temperature > 85
+                      ? "var(--color-error-500)"
+                      : gpu.temperature > 70
+                        ? "var(--color-warning-500)"
+                        : "var(--color-success-500)"
+                  }
+                />
+              ),
+          )}
+          {latest.gpus.map(
+            (gpu) =>
+              gpu.utilization !== null && (
+                <StatCard
+                  key={`util-${gpu.index}`}
+                  label={`GPU ${gpu.index} Util`}
+                  value={`${gpu.utilization.toFixed(0)}%`}
+                  color={gpu.utilization > 90 ? "var(--color-cobalt-600)" : "var(--color-on-surface)"}
+                />
+              ),
+          )}
+        </div>
+      )}
+
+      {latest && gpuCount === 0 && (
+        <div className="card card-static p-4 text-center text-[var(--color-on-surface-secondary)] text-small">
+          No GPU detected. GPU metrics are unavailable. CPU and RAM monitoring remain active.
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-4">
+        <MetricChart title="CPU Usage" points={cpuPoints} unit="%" color="var(--color-info-500)" yMax={100} yMin={0} />
+
+        <MetricChart
+          title="RAM Usage"
+          points={ramPoints}
+          unit="GB"
+          color="var(--color-azure-500)"
+          area
+          yMin={0}
+          yMax={latest?.ram_total_gb}
+        />
+
+        {Array.from({ length: gpuCount }).flatMap((_, gpuIdx) => {
+          const gpu = latest?.gpus[gpuIdx];
+          const gpuName = gpu?.name ?? `GPU ${gpuIdx}`;
+          const color = GPU_COLORS[gpuIdx % GPU_COLORS.length];
+          const series = gpuSeries[gpuIdx];
+          const charts: React.ReactNode[] = [];
+
+          charts.push(
+            <MetricChart
+              key={`vram-${gpuIdx}`}
+              title={`VRAM - ${gpuName}`}
+              points={series.vram}
+              unit="MB"
+              color={color}
+              area
+              yMin={0}
+              yMax={gpu?.vram_total_mb}
+            />,
+          );
+
+          if (gpu?.utilization !== null) {
+            charts.push(
+              <MetricChart
+                key={`util-${gpuIdx}`}
+                title={`GPU Utilization - ${gpuName}`}
+                points={series.utilization}
+                unit="%"
+                color={color}
+                yMax={100}
+                yMin={0}
+              />,
+            );
+          }
+
+          if (gpu?.temperature !== null) {
+            charts.push(
+              <MetricChart
+                key={`temp-${gpuIdx}`}
+                title={`Temperature - ${gpuName}`}
+                points={series.temperature}
+                unit={"\u00B0C"}
+                color="var(--color-error-500)"
+                yMin={0}
+                yMax={100}
+              />,
+            );
+          }
+
+          return charts;
+        })}
+      </div>
+
+      {!latest && (
+        <div className="card card-static p-8 text-center">
+          <h3 className="m-0 mb-2 text-[var(--color-on-surface)] text-body font-semibold">Waiting for Metrics</h3>
+          <p className="m-0 text-[var(--color-on-surface-secondary)] text-small">
+            System metrics will appear here once the backend connection is established. The monitor streams CPU, RAM,
+            and GPU data in real time.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/pages/RunPage.tsx b/web/gui/src/renderer/pages/RunPage.tsx
new file mode 100644
index 000000000..8b105e69e
--- /dev/null
+++ b/web/gui/src/renderer/pages/RunPage.tsx
@@ -0,0 +1,423 @@
+import { CheckIcon, CirclePlay, Pause, Play, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { configApi } from "@/api/configApi";
+import { ProgressBar } from "@/components/shared";
+import { ScalarChart } from "@/components/shared/ScalarChart";
+import { useElapsedTime } from "@/hooks/useElapsedTime";
+import { type TrainingStatus, useTrainingStore } from "@/store/trainingStore";
+import { formatStep } from "@/utils/chartUtils";
+import { formatDuration } from "@/utils/formatDuration";
+
+interface ScalarPoint {
+  wall_time: number;
+  step: number;
+  value: number;
+}
+
+interface TagData {
+  tag: string;
+  points: ScalarPoint[];
+  lastStep: number;
+}
+
+const ACTIVE_POLL_MS = 2000;
+const PREPARING_POLL_MS = 4000;
+const IDLE_POLL_MS = 5000;
+
+const TAG_REDETECT_INTERVAL = 10;
+
+const STATUS_CLASSES: Record<TrainingStatus, { badge: string; label: string }> = {
+  idle: {
+    badge: "bg-[var(--color-border-subtle)] text-[var(--color-on-surface-secondary)]",
+    label: "Idle",
+  },
+  preparing: {
+    badge: "bg-[var(--color-warning-500-alpha-12)] text-[var(--color-warning-500)]",
+    label: "Preparing",
+  },
+  training: {
+    badge: "bg-[var(--color-cobalt-600-alpha-12)] text-[var(--color-cobalt-600)]",
+    label: "Training",
+  },
+  error: {
+    badge: "bg-[var(--color-error-500-alpha-12)] text-[var(--color-error-500)]",
+    label: "Error",
+  },
+};
+
+function getLineColor(tag: string): string {
+  const lower = tag.toLowerCase();
+  if (lower.includes("loss") || lower.includes("smooth_loss")) {
+    return "var(--color-cobalt-600)";
+  }
+  if (lower.includes("lr") || lower.includes("learning_rate")) {
+    return "var(--color-azure-500)";
+  }
+  return "var(--color-cobalt-600)";
+}
+
+function StatusBadge({ status }: { status: TrainingStatus }) {
+  const { badge, label } = STATUS_CLASSES[status];
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-label font-semibold tracking-wide uppercase ${badge}`}
+    >
+      {(status === "training" || status === "preparing") && (
+        <span className="status-badge-pulse w-1.5 h-1.5 rounded-full inline-block" />
+      )}
+      {label}
+    </span>
+  );
+}
+
+export default function RunPage() {
+  const status = useTrainingStore((s) => s.status);
+  const progress = useTrainingStore((s) => s.progress);
+  const statusText = useTrainingStore((s) => s.statusText);
+  const latestSample = useTrainingStore((s) => s.latestSample);
+  const sampleUrls = useTrainingStore((s) => s.sampleUrls);
+  const error = useTrainingStore((s) => s.error);
+  const startTime = useTrainingStore((s) => s.startTime);
+
+  const [runs, setRuns] = useState<string[]>([]);
+  const [selectedRun, setSelectedRun] = useState<string>("");
+  const [tagData, setTagData] = useState<TagData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [trainingCompleted, setTrainingCompleted] = useState(false);
+
+  const tagDataRef = useRef<TagData[]>([]);
+  const selectedRunRef = useRef<string>("");
+  const statusRef = useRef<TrainingStatus>(status);
+  const userManuallySelectedRun = useRef(false);
+  const pollCountRef = useRef(0);
+
+  tagDataRef.current = tagData;
+  selectedRunRef.current = selectedRun;
+  statusRef.current = status;
+
+  const prevStatusRef = useRef<TrainingStatus>(status);
+  useEffect(() => {
+    if (prevStatusRef.current === "training" && status === "idle") {
+      setTrainingCompleted(true);
+    } else if (status === "training" || status === "preparing") {
+      setTrainingCompleted(false);
+    }
+    prevStatusRef.current = status;
+  }, [status]);
+
+  const elapsed = useElapsedTime(startTime, status === "training");
+
+  const loadRunData = useCallback(async (runName: string) => {
+    if (!runName) return;
+    setLoading(true);
+    setFetchError(null);
+    try {
+      const tags = await configApi.tensorboardTags(runName);
+      const results = await Promise.all(
+        tags.map(async (tag) => {
+          const points = await configApi.tensorboardScalars(runName, tag);
+          const lastStep = points.length > 0 ? points[points.length - 1].step : 0;
+          return { tag, points, lastStep } as TagData;
+        }),
+      );
+      setTagData(results);
+      pollCountRef.current = 0;
+    } catch (err) {
+      setFetchError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const fetchIncremental = useCallback(async () => {
+    const runName = selectedRunRef.current;
+    if (!runName) return;
+
+    const currentData = tagDataRef.current;
+
+    pollCountRef.current += 1;
+    if (currentData.length === 0 || pollCountRef.current >= TAG_REDETECT_INTERVAL) {
+      pollCountRef.current = 0;
+      await loadRunData(runName);
+      return;
+    }
+
+    try {
+      const updatedData = await Promise.all(
+        currentData.map(async (td) => {
+          const newPoints = await configApi.tensorboardScalars(runName, td.tag, td.lastStep);
+          if (newPoints.length === 0) return td;
+          const allPoints = [...td.points, ...newPoints];
+          return {
+            tag: td.tag,
+            points: allPoints,
+            lastStep: allPoints[allPoints.length - 1].step,
+          } as TagData;
+        }),
+      );
+      setTagData(updatedData);
+    } catch {
+      /* ignore */
+    }
+  }, [loadRunData]);
+
+  const detectAndSwitchToLatest = useCallback(async () => {
+    try {
+      const freshRuns = await configApi.tensorboardRuns();
+      setRuns(freshRuns);
+      if (freshRuns.length > 0 && !userManuallySelectedRun.current) {
+        const latest = freshRuns[0];
+        if (latest !== selectedRunRef.current) {
+          setSelectedRun(latest);
+        }
+      }
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  useEffect(() => {
+    configApi
+      .tensorboardRuns()
+      .then((r) => {
+        setRuns(r);
+        if (r.length > 0 && !selectedRunRef.current) {
+          setSelectedRun(r[0]);
+        }
+      })
+      .catch((err) => setFetchError(err instanceof Error ? err.message : String(err)));
+  }, []);
+
+  useEffect(() => {
+    if (status === "training" || status === "preparing") {
+      userManuallySelectedRun.current = false;
+      detectAndSwitchToLatest();
+    }
+  }, [status, detectAndSwitchToLatest]);
+
+  useEffect(() => {
+    if (selectedRun) {
+      loadRunData(selectedRun);
+    } else {
+      setTagData([]);
+    }
+  }, [selectedRun, loadRunData]);
+
+  useEffect(() => {
+    const isTraining = status === "training";
+    const isPreparing = status === "preparing";
+
+    if (isTraining) {
+      const interval = setInterval(() => {
+        detectAndSwitchToLatest();
+        fetchIncremental();
+      }, ACTIVE_POLL_MS);
+      return () => clearInterval(interval);
+    }
+
+    if (isPreparing) {
+      const interval = setInterval(detectAndSwitchToLatest, PREPARING_POLL_MS);
+      return () => clearInterval(interval);
+    }
+
+    if (autoRefresh && selectedRun) {
+      const interval = setInterval(fetchIncremental, IDLE_POLL_MS);
+      return () => clearInterval(interval);
+    }
+  }, [status, autoRefresh, selectedRun, fetchIncremental, detectAndSwitchToLatest]);
+
+  const isActive = status === "training" || status === "preparing";
+  const hasData = tagData.length > 0 && tagData.some((td) => td.points.length > 0);
+  const noRunsExist = runs.length === 0;
+
+  const handleRunChange = (runName: string) => {
+    userManuallySelectedRun.current = true;
+    setSelectedRun(runName);
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div
+        className={`card card-static px-5 py-4 ${
+          isActive ? "run-card-active" : trainingCompleted ? "border-[var(--color-success-500-alpha-20)]" : ""
+        }`}
+      >
+        <div className="flex items-center gap-4 flex-wrap">
+          <StatusBadge status={status} />
+
+          {isActive && progress && (
+            <>
+              <div className="flex-1 min-w-[120px]">
+                <ProgressBar value={progress.maxStep > 0 ? (progress.step / progress.maxStep) * 100 : 0} />
+              </div>
+              <div className="mono tabular-nums flex items-center gap-4 text-micro text-[var(--color-on-surface-secondary)] whitespace-nowrap">
+                <span>
+                  Step <span className="text-[var(--color-on-surface)] font-semibold">{formatStep(progress.step)}</span>
+                  /{formatStep(progress.maxStep)}
+                </span>
+                <span>
+                  Epoch <span className="text-[var(--color-on-surface)] font-semibold">{progress.epoch}</span>/
+                  {progress.maxEpoch}
+                </span>
+                {startTime && status === "training" && elapsed > 0 && <span>{formatDuration(elapsed)}</span>}
+              </div>
+            </>
+          )}
+
+          {isActive && statusText && !progress && (
+            <span className="text-caption text-[var(--color-on-surface-secondary)]">{statusText}</span>
+          )}
+
+          <div className="flex-1" />
+
+          {runs.length > 0 && (
+            <div className="flex items-center gap-2">
+              <label
+                htmlFor="run-select"
+                className="text-caption font-semibold text-[var(--color-on-surface)] whitespace-nowrap"
+              >
+                Run
+              </label>
+              <select
+                id="run-select"
+                className="top-bar-select max-w-[400px] min-w-[200px]"
+                value={selectedRun}
+                onChange={(e) => handleRunChange(e.target.value)}
+              >
+                {runs.map((run) => (
+                  <option key={run} value={run}>
+                    {run}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {isActive ? (
+            <span className="text-label text-[var(--color-success-500)] inline-flex items-center gap-1">
+              <span className="status-badge-pulse w-1.5 h-1.5 rounded-full inline-block" />
+              Live
+            </span>
+          ) : (
+            <div className="flex items-center gap-2">
+              <button
+                className="theme-toggle py-[5px] px-3 text-xs font-medium inline-flex items-center gap-1.5"
+                onClick={() => setAutoRefresh(!autoRefresh)}
+                title={autoRefresh ? "Pause auto-refresh" : "Resume auto-refresh"}
+              >
+                {autoRefresh ? <Pause className="w-3 h-3" /> : <Play className="w-3 h-3" />}
+                {autoRefresh ? "Live" : "Paused"}
+              </button>
+
+              <button
+                className="theme-toggle py-[5px] px-3 text-xs font-medium"
+                onClick={() => loadRunData(selectedRun)}
+                title="Refresh data"
+              >
+                <RefreshCw className="w-3 h-3" />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {trainingCompleted && (
+          <div className="mt-3 px-3 py-2 rounded-md flex items-center gap-2 text-caption font-medium text-[var(--color-success-500)] bg-[var(--color-success-500-alpha-08)] border border-[var(--color-success-500-alpha-15)]">
+            <CheckIcon className="w-3.5 h-3.5" />
+            Training completed. Results shown below.
+          </div>
+        )}
+
+        {status === "error" && error && (
+          <div className="mt-3 px-3 py-2 rounded-md text-caption font-medium text-[var(--color-error-500)] bg-[var(--color-error-500-alpha-08)] border border-[var(--color-error-500-alpha-15)]">
+            {error}
+          </div>
+        )}
+      </div>
+
+      {fetchError && (
+        <div className="card card-static px-4 py-3 border-[var(--color-error-500)] text-[var(--color-error-500)] text-caption">
+          {fetchError}
+        </div>
+      )}
+
+      {loading && (
+        <div className="card card-static p-6 flex items-center justify-center text-[var(--color-on-surface-secondary)] text-small">
+          Loading metrics data...
+        </div>
+      )}
+
+      {!loading && noRunsExist && !fetchError && (
+        <div className="card card-static p-8 text-center">
+          <CirclePlay className="mx-auto mb-4 block opacity-50 w-12 h-12 text-[var(--color-on-surface-secondary)]" />
+          <h3 className="m-0 mb-2 text-[var(--color-on-surface)] text-body font-semibold">No Training Runs Found</h3>
+          <p className="m-0 mx-auto text-[var(--color-on-surface-secondary)] text-small leading-relaxed max-w-[420px]">
+            TensorBoard event files will appear here once you start a training run. The log directory is derived from
+            your workspace configuration.
+          </p>
+        </div>
+      )}
+
+      {!loading && selectedRun && tagData.length === 0 && !fetchError && !noRunsExist && (
+        <div className="card card-static p-6 text-center text-[var(--color-on-surface-secondary)] text-small">
+          No scalar data found for this run. Training may not have started logging yet.
+        </div>
+      )}
+
+      {isActive && !hasData && !loading && !noRunsExist && (
+        <div className="card card-static p-8 text-center flex flex-col items-center gap-3">
+          <div className="skeleton w-[200px] h-2 rounded" />
+          <span className="text-[var(--color-on-surface-secondary)] text-small">Waiting for training data...</span>
+        </div>
+      )}
+
+      {!loading && hasData && (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,480px),1fr))] gap-4">
+          {tagData
+            .filter((td) => td.points.length > 0)
+            .map((td) => (
+              <ScalarChart key={td.tag} tag={td.tag} points={td.points} lineColor={getLineColor(td.tag)} />
+            ))}
+        </div>
+      )}
+
+      {sampleUrls.length > 0 && (
+        <div className="card card-static p-4">
+          <div className="flex justify-between items-baseline mb-3">
+            <h4 className="m-0 text-caption font-semibold text-[var(--color-on-surface)]">Training Samples</h4>
+            <span className="mono tabular-nums text-label text-[var(--color-on-surface-secondary)]">
+              {sampleUrls.length}
+            </span>
+          </div>
+
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
+            {latestSample && (
+              <div className="rounded-md overflow-hidden border-2 border-[var(--color-cobalt-600-alpha-20)] bg-[var(--color-input-bg)]">
+                <img
+                  src={latestSample}
+                  alt="Latest training sample"
+                  className="block w-full max-h-[300px] object-contain"
+                />
+              </div>
+            )}
+
+            {[...sampleUrls]
+              .reverse()
+              .slice(1)
+              .map((sample) => (
+                <div
+                  key={sample.id}
+                  className="rounded overflow-hidden border border-[var(--color-border-subtle)] bg-[var(--color-input-bg)]"
+                >
+                  <img src={sample.url} alt="Training sample" className="block w-full max-h-[220px] object-contain" />
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/pages/SamplingPage.tsx b/web/gui/src/renderer/pages/SamplingPage.tsx
new file mode 100644
index 000000000..79f1ebeff
--- /dev/null
+++ b/web/gui/src/renderer/pages/SamplingPage.tsx
@@ -0,0 +1,128 @@
+import { useCallback, useMemo, useState } from "react";
+
+import { SampleParamsModal } from "@/components/modals/SampleParamsModal";
+import { SampleList } from "@/components/sampling/SampleList";
+import { FormEntry, SectionCard, Select, Toggle } from "@/components/shared";
+import { useConfigField } from "@/hooks/useConfigField";
+import type { SampleConfig } from "@/types/generated/config";
+import { ImageFormatValues, TimeUnitValues } from "@/types/generated/enums";
+
+const DEFAULT_SAMPLE: SampleConfig = {
+  enabled: true,
+  prompt: "",
+  negative_prompt: "",
+  height: 512,
+  width: 512,
+  frames: 1,
+  length: 1,
+  seed: 42,
+  random_seed: false,
+  diffusion_steps: 20,
+  cfg_scale: 7.0,
+  noise_scheduler: "DDIM",
+  text_encoder_1_layer_skip: 0,
+  text_encoder_1_sequence_length: null,
+  text_encoder_2_layer_skip: 0,
+  text_encoder_2_sequence_length: null,
+  text_encoder_3_layer_skip: 0,
+  text_encoder_4_layer_skip: 0,
+  transformer_attention_mask: false,
+  force_last_timestep: false,
+  sample_inpainting: false,
+  base_image_path: "",
+  mask_image_path: "",
+};
+
+const newSample = (): SampleConfig => ({
+  ...JSON.parse(JSON.stringify(DEFAULT_SAMPLE)),
+  seed: Math.floor(Math.random() * 2 ** 30),
+});
+
+export default function SamplingPage() {
+  const [samples, setSamples] = useConfigField<SampleConfig[] | null>("samples");
+  const list = useMemo<SampleConfig[]>(() => samples ?? [], [samples]);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number>(0);
+
+  const handleAdd = useCallback(() => {
+    setSamples([...list, newSample()]);
+  }, [list, setSamples]);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      setSamples(list.filter((_, i) => i !== index));
+    },
+    [list, setSamples],
+  );
+
+  const handleClone = useCallback(
+    (index: number) => {
+      const cloned = JSON.parse(JSON.stringify(list[index])) as SampleConfig;
+      cloned.seed = Math.floor(Math.random() * 2 ** 30);
+      const next = [...list];
+      next.splice(index + 1, 0, cloned);
+      setSamples(next);
+    },
+    [list, setSamples],
+  );
+
+  const handleToggle = useCallback(
+    (index: number, enabled: boolean) => {
+      setSamples(list.map((s, i) => (i === index ? { ...s, enabled } : s)));
+    },
+    [list, setSamples],
+  );
+
+  const handleOpen = useCallback((index: number) => {
+    setEditingIndex(index);
+    setEditorOpen(true);
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCard title="Sampling Settings">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormEntry
+            label="Sample After"
+            configPath="sample_after"
+            type="number"
+            tooltip="Interval between automatic samples during training"
+          />
+          <Select label="Sample After Unit" configPath="sample_after_unit" options={[...TimeUnitValues]} />
+          <FormEntry
+            label="Skip First"
+            configPath="sample_skip_first"
+            type="number"
+            tooltip="Wait this long before the first auto-sample"
+          />
+          <Select label="Image Format" configPath="sample_image_format" options={[...ImageFormatValues]} />
+          <Toggle
+            configPath="non_ema_sampling"
+            label="Non-EMA Sampling"
+            tooltip="Include non-EMA sampling alongside EMA samples"
+          />
+          <Toggle
+            configPath="samples_to_tensorboard"
+            label="Samples to Tensorboard"
+            tooltip="Include sample images in Tensorboard"
+          />
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Sample Prompts">
+        <SampleList
+          samples={list}
+          onAdd={handleAdd}
+          onOpen={handleOpen}
+          onClone={handleClone}
+          onRemove={handleRemove}
+          onToggle={handleToggle}
+        />
+      </SectionCard>
+
+      {editorOpen && (
+        <SampleParamsModal open={editorOpen} onClose={() => setEditorOpen(false)} sampleIndex={editingIndex} />
+      )}
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/pages/ToolsPage.tsx b/web/gui/src/renderer/pages/ToolsPage.tsx
new file mode 100644
index 000000000..13d0956aa
--- /dev/null
+++ b/web/gui/src/renderer/pages/ToolsPage.tsx
@@ -0,0 +1,92 @@
+import { Activity, Database, Image, RefreshCw, Video, Wand2 } from "lucide-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { CaptionToolModal } from "@/components/modals/CaptionToolModal";
+import { ConvertModelModal } from "@/components/modals/ConvertModelModal";
+import { MaskToolModal } from "@/components/modals/MaskToolModal";
+import { ProfilingPanel } from "@/components/modals/ProfilingPanel";
+import { StandaloneSamplingModal } from "@/components/modals/StandaloneSamplingModal";
+import { VideoToolModal } from "@/components/modals/VideoToolModal";
+import { Button, Card } from "@/components/shared";
+
+interface ToolCardProps {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  onLaunch?: () => void;
+}
+
+function ToolCard({ icon, title, description, onLaunch }: ToolCardProps) {
+  return (
+    <Card className="flex flex-col items-center text-center gap-4">
+      <div className="w-12 h-12 rounded-full flex items-center justify-center bg-[var(--color-border-subtle)]">
+        {icon}
+      </div>
+      <h3 className="text-base font-semibold text-[var(--color-on-surface)]">{title}</h3>
+      <p className="text-sm text-[var(--color-on-surface-secondary)]">{description}</p>
+      <Button variant="secondary" disabled={!onLaunch} onClick={onLaunch}>
+        Launch
+      </Button>
+    </Card>
+  );
+}
+
+export default function ToolsPage() {
+  const [profilingOpen, setProfilingOpen] = useState(false);
+  const [captionOpen, setCaptionOpen] = useState(false);
+  const [maskOpen, setMaskOpen] = useState(false);
+  const [videoOpen, setVideoOpen] = useState(false);
+  const [convertOpen, setConvertOpen] = useState(false);
+  const [samplingOpen, setSamplingOpen] = useState(false);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ToolCard
+          icon={<Database className="w-6 h-6 text-[var(--color-cobalt-600)]" />}
+          title="Generate Captions"
+          description="Batch generate captions using BLIP, WD14, OpenAI, or Gemini API"
+          onLaunch={() => setCaptionOpen(true)}
+        />
+        <ToolCard
+          icon={<Wand2 className="w-6 h-6 text-[var(--color-cobalt-600)]" />}
+          title="Generate Masks"
+          description="Batch generate or interactively edit masks with YOLO support"
+          onLaunch={() => setMaskOpen(true)}
+        />
+        <ToolCard
+          icon={<Video className="w-6 h-6 text-[var(--color-cobalt-600)]" />}
+          title="Video Tools"
+          description="Extract clips, images, and download videos"
+          onLaunch={() => setVideoOpen(true)}
+        />
+        <ToolCard
+          icon={<RefreshCw className="w-6 h-6 text-[var(--color-cobalt-600)]" />}
+          title="Convert Model"
+          description="Convert between model formats"
+          onLaunch={() => setConvertOpen(true)}
+        />
+        <ToolCard
+          icon={<Image className="w-6 h-6 text-[var(--color-cobalt-600)]" />}
+          title="Sampling"
+          description="Generate samples from a trained model"
+          onLaunch={() => setSamplingOpen(true)}
+        />
+        <ToolCard
+          icon={<Activity className="w-6 h-6 text-[var(--color-cobalt-600)]" />}
+          title="Profiling"
+          description="Profile training performance"
+          onLaunch={() => setProfilingOpen(true)}
+        />
+      </div>
+
+      <ProfilingPanel open={profilingOpen} onClose={() => setProfilingOpen(false)} />
+      <CaptionToolModal open={captionOpen} onClose={() => setCaptionOpen(false)} />
+      <MaskToolModal open={maskOpen} onClose={() => setMaskOpen(false)} />
+      <VideoToolModal open={videoOpen} onClose={() => setVideoOpen(false)} />
+      <ConvertModelModal open={convertOpen} onClose={() => setConvertOpen(false)} />
+      <StandaloneSamplingModal open={samplingOpen} onClose={() => setSamplingOpen(false)} />
+    </>
+  );
+}
diff --git a/web/gui/src/renderer/store/configStore.ts b/web/gui/src/renderer/store/configStore.ts
new file mode 100644
index 000000000..0ea34fc7b
--- /dev/null
+++ b/web/gui/src/renderer/store/configStore.ts
@@ -0,0 +1,491 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+import type { OptimizerParamsResponse } from "@/api/configApi";
+import { configApi } from "@/api/configApi";
+import type { TrainConfig } from "@/types/generated/config";
+
+function setByPath(obj: Record<string, unknown>, path: string, value: unknown): void {
+  if (import.meta.env.DEV) {
+    const parentPath = path.split(".").slice(0, -1).join(".");
+    if (parentPath && getByPath(obj, parentPath) === undefined) {
+      console.warn(
+        `[configStore] setByPath: intermediate path "${parentPath}" does not exist in config. ` +
+          `Path "${path}" may be a typo.`,
+      );
+    }
+  }
+
+  const keys = path.split(".");
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let current: any = obj;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (current[key] === undefined || current[key] === null) {
+      current[key] = {};
+    }
+    current = current[key];
+  }
+
+  const lastKey = keys[keys.length - 1];
+  current[lastKey] = value;
+}
+
+export function getByPath(obj: Record<string, unknown>, path: string): unknown {
+  const keys = path.split(".");
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let current: any = obj;
+
+  for (const key of keys) {
+    if (current === undefined || current === null) {
+      return undefined;
+    }
+    current = current[key];
+  }
+
+  return current;
+}
+
+const SYNC_DEBOUNCE_MS = 500;
+
+type ImmerSet = (fn: (draft: ConfigState) => void) => void;
+
+async function withLoading(set: ImmerSet, fn: () => Promise<void>): Promise<void> {
+  set((draft) => {
+    draft.isLoading = true;
+    draft.error = null;
+  });
+  try {
+    await fn();
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error("[configStore]", message);
+    set((draft) => {
+      draft.error = message;
+    });
+  } finally {
+    set((draft) => {
+      draft.isLoading = false;
+    });
+  }
+}
+
+interface ConfigState {
+  config: TrainConfig | null;
+  isDirty: boolean;
+  isLoading: boolean;
+  error: string | null;
+  loadedPresetName: string | null;
+  optimizerParams: OptimizerParamsResponse | null;
+  optimizerParamsFetched: boolean;
+  _optimizerParamsFetching: boolean;
+  _syncTimer: ReturnType<typeof setTimeout> | null;
+  _syncGeneration: number;
+  _conceptSaveTimer: ReturnType<typeof setTimeout> | null;
+  _sampleSaveTimer: ReturnType<typeof setTimeout> | null;
+  _secretsSaveTimer: ReturnType<typeof setTimeout> | null;
+
+  loadConfig: () => Promise<void>;
+  updateField: (path: string, value: unknown) => void;
+  updateConfig: (partial: Partial<TrainConfig>) => void;
+  syncToBackend: () => Promise<void>;
+  loadConcepts: () => Promise<void>;
+  loadSamples: () => Promise<void>;
+  loadPreset: (presetPath: string, presetName?: string) => Promise<void>;
+  savePreset: (name: string) => Promise<void>;
+  changeOptimizer: (optimizer: string) => Promise<void>;
+  loadDefaults: () => Promise<void>;
+  exportConfig: () => Promise<TrainConfig>;
+  fetchOptimizerParams: () => Promise<void>;
+  flushPendingChanges: () => Promise<void>;
+  clearError: () => void;
+  destroy: () => void;
+}
+
+function cancelPendingSync(get: () => ConfigState, set: ImmerSet): void {
+  const timer = get()._syncTimer;
+  if (timer !== null) {
+    clearTimeout(timer);
+    set((draft) => {
+      draft._syncTimer = null;
+    });
+  }
+}
+
+function scheduleDebouncedSync(get: () => ConfigState, set: ImmerSet): void {
+  cancelPendingSync(get, set);
+  const timer = setTimeout(() => {
+    set((draft) => {
+      draft._syncTimer = null;
+    });
+    void get().syncToBackend();
+  }, SYNC_DEBOUNCE_MS);
+  set((draft) => {
+    draft._syncTimer = timer;
+  });
+}
+
+function incrementGeneration(get: () => ConfigState, set: ImmerSet): number {
+  const next = get()._syncGeneration + 1;
+  set((draft) => {
+    draft._syncGeneration = next;
+  });
+  return next;
+}
+
+export const useConfigStore = create<ConfigState>()(
+  immer((set, get) => ({
+    config: null,
+    isDirty: false,
+    isLoading: false,
+    error: null,
+    loadedPresetName: null,
+    _syncTimer: null,
+    _syncGeneration: 0,
+    _conceptSaveTimer: null,
+    _sampleSaveTimer: null,
+    _secretsSaveTimer: null,
+    optimizerParams: null,
+    optimizerParamsFetched: false,
+    _optimizerParamsFetching: false,
+
+    loadConfig: async () => {
+      await withLoading(set, async () => {
+        const config = await configApi.getConfig();
+        cancelPendingSync(get, set);
+        set((draft) => {
+          draft.config = config;
+          draft.isDirty = false;
+        });
+      });
+      await Promise.all([get().loadConcepts(), get().loadSamples()]);
+    },
+
+    updateField: (path: string, value: unknown) => {
+      set((draft) => {
+        if (draft.config === null) return;
+        setByPath(draft.config as unknown as Record<string, unknown>, path, value);
+        draft.isDirty = true;
+        draft.error = null;
+      });
+      scheduleDebouncedSync(get, set);
+
+      if (path === "concepts") {
+        const timer = get()._conceptSaveTimer;
+        if (timer !== null) clearTimeout(timer);
+        const saveTimer = setTimeout(() => {
+          set((draft) => {
+            draft._conceptSaveTimer = null;
+          });
+          const concepts = get().config?.concepts;
+          if (concepts != null) {
+            configApi.saveConcepts(concepts).catch((err) => {
+              console.error("[configStore] Failed to save concepts file:", err);
+            });
+          }
+        }, SYNC_DEBOUNCE_MS);
+        set((draft) => {
+          draft._conceptSaveTimer = saveTimer;
+        });
+      }
+
+      if (path === "samples" || path.startsWith("samples.")) {
+        const timer = get()._sampleSaveTimer;
+        if (timer !== null) clearTimeout(timer);
+        const saveTimer = setTimeout(() => {
+          set((draft) => {
+            draft._sampleSaveTimer = null;
+          });
+          const samples = get().config?.samples;
+          if (samples != null) {
+            configApi.saveSamples(samples).catch((err) => {
+              console.error("[configStore] Failed to save samples file:", err);
+            });
+          }
+        }, SYNC_DEBOUNCE_MS);
+        set((draft) => {
+          draft._sampleSaveTimer = saveTimer;
+        });
+      }
+
+      if (path === "secrets" || path.startsWith("secrets.")) {
+        const timer = get()._secretsSaveTimer;
+        if (timer !== null) clearTimeout(timer);
+        const saveTimer = setTimeout(() => {
+          set((draft) => {
+            draft._secretsSaveTimer = null;
+          });
+          const secrets = get().config?.secrets;
+          if (secrets != null) {
+            configApi.saveSecrets(secrets).catch((err) => {
+              console.error("[configStore] Failed to save secrets file:", err);
+            });
+          }
+        }, SYNC_DEBOUNCE_MS);
+        set((draft) => {
+          draft._secretsSaveTimer = saveTimer;
+        });
+      }
+    },
+
+    updateConfig: (partial: Partial<TrainConfig>) => {
+      set((draft) => {
+        if (draft.config === null) return;
+        Object.assign(draft.config, partial);
+        draft.isDirty = true;
+        draft.error = null;
+      });
+      scheduleDebouncedSync(get, set);
+    },
+
+    syncToBackend: async () => {
+      const { config, isDirty } = get();
+      if (config === null || !isDirty) return;
+
+      cancelPendingSync(get, set);
+
+      set((draft) => {
+        draft.isLoading = true;
+        draft.error = null;
+      });
+
+      const gen = incrementGeneration(get, set);
+
+      try {
+        const reconciled = await configApi.updateConfig(config);
+        if (gen === get()._syncGeneration) {
+          set((draft) => {
+            draft.config = reconciled;
+            draft.isDirty = false;
+            draft.isLoading = false;
+          });
+        }
+      } catch (err) {
+        if (gen === get()._syncGeneration) {
+          set((draft) => {
+            draft.error = err instanceof Error ? err.message : String(err);
+            draft.isLoading = false;
+          });
+        }
+      }
+    },
+
+    flushPendingChanges: async () => {
+      const { _syncTimer, _conceptSaveTimer, _sampleSaveTimer, _secretsSaveTimer } = get();
+
+      const tasks: Array<Promise<unknown>> = [];
+
+      if (_syncTimer !== null) {
+        clearTimeout(_syncTimer);
+        set((draft) => {
+          draft._syncTimer = null;
+        });
+      }
+      if (get().isDirty) {
+        tasks.push(get().syncToBackend());
+      }
+
+      if (_conceptSaveTimer !== null) {
+        clearTimeout(_conceptSaveTimer);
+        set((draft) => {
+          draft._conceptSaveTimer = null;
+        });
+        const concepts = get().config?.concepts;
+        if (concepts != null) {
+          tasks.push(
+            configApi.saveConcepts(concepts).catch((err) => {
+              console.error("[configStore] flush: failed to save concepts:", err);
+            }),
+          );
+        }
+      }
+
+      if (_sampleSaveTimer !== null) {
+        clearTimeout(_sampleSaveTimer);
+        set((draft) => {
+          draft._sampleSaveTimer = null;
+        });
+        const samples = get().config?.samples;
+        if (samples != null) {
+          tasks.push(
+            configApi.saveSamples(samples).catch((err) => {
+              console.error("[configStore] flush: failed to save samples:", err);
+            }),
+          );
+        }
+      }
+
+      if (_secretsSaveTimer !== null) {
+        clearTimeout(_secretsSaveTimer);
+        set((draft) => {
+          draft._secretsSaveTimer = null;
+        });
+        const secrets = get().config?.secrets;
+        if (secrets != null) {
+          tasks.push(
+            configApi.saveSecrets(secrets).catch((err) => {
+              console.error("[configStore] flush: failed to save secrets:", err);
+            }),
+          );
+        }
+      }
+
+      await Promise.all(tasks);
+    },
+
+    loadConcepts: async () => {
+      try {
+        const concepts = await configApi.getConcepts();
+        set((draft) => {
+          if (draft.config) {
+            draft.config.concepts = concepts;
+          }
+        });
+      } catch {
+        // concept file may not exist yet
+      }
+    },
+
+    loadSamples: async () => {
+      try {
+        const samples = await configApi.getSamples();
+        set((draft) => {
+          if (draft.config) {
+            draft.config.samples = samples;
+          }
+        });
+      } catch {
+        // sample file may not exist yet
+      }
+    },
+
+    loadPreset: async (presetPath: string, presetName?: string) => {
+      cancelPendingSync(get, set);
+      incrementGeneration(get, set);
+
+      await withLoading(set, async () => {
+        const config = await configApi.loadPreset(presetPath);
+        const name = presetName ?? presetPath.replace(/.*[/\\]/, "").replace(/\.json$/, "");
+        set((draft) => {
+          draft.config = config;
+          draft.isDirty = false;
+          draft.loadedPresetName = name;
+        });
+      });
+      await Promise.all([get().loadConcepts(), get().loadSamples()]);
+    },
+
+    savePreset: async (name: string) => {
+      const { isDirty } = get();
+      if (isDirty) {
+        cancelPendingSync(get, set);
+        incrementGeneration(get, set);
+        await get().syncToBackend();
+      }
+
+      await withLoading(set, async () => {
+        await configApi.savePreset(name);
+      });
+    },
+
+    changeOptimizer: async (optimizer: string) => {
+      cancelPendingSync(get, set);
+      incrementGeneration(get, set);
+
+      await withLoading(set, async () => {
+        const config = await configApi.changeOptimizer(optimizer);
+        set((draft) => {
+          draft.config = config;
+          draft.isDirty = false;
+        });
+      });
+    },
+
+    loadDefaults: async () => {
+      cancelPendingSync(get, set);
+      incrementGeneration(get, set);
+
+      await withLoading(set, async () => {
+        const defaults = await configApi.getDefaults();
+        set((draft) => {
+          draft.config = defaults;
+          draft.isDirty = false;
+        });
+      });
+    },
+
+    exportConfig: async () => {
+      const { isDirty } = get();
+      if (isDirty) {
+        cancelPendingSync(get, set);
+        await get().syncToBackend();
+      }
+
+      set((draft) => {
+        draft.error = null;
+      });
+
+      try {
+        return await configApi.exportConfig();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        set((draft) => {
+          draft.error = message;
+        });
+        throw err;
+      }
+    },
+
+    fetchOptimizerParams: async () => {
+      const { optimizerParams, _optimizerParamsFetching } = get();
+      if (optimizerParams || _optimizerParamsFetching) return;
+
+      set((draft) => {
+        draft._optimizerParamsFetching = true;
+      });
+      try {
+        const data = await configApi.getOptimizerParams();
+        set((draft) => {
+          draft.optimizerParams = data;
+          draft.optimizerParamsFetched = true;
+          draft._optimizerParamsFetching = false;
+        });
+      } catch {
+        set((draft) => {
+          draft.optimizerParamsFetched = true;
+          draft._optimizerParamsFetching = false;
+        });
+      }
+    },
+
+    clearError: () => {
+      set((draft) => {
+        draft.error = null;
+      });
+    },
+
+    destroy: () => {
+      const syncTimer = get()._syncTimer;
+      if (syncTimer !== null) clearTimeout(syncTimer);
+      const conceptTimer = get()._conceptSaveTimer;
+      if (conceptTimer !== null) clearTimeout(conceptTimer);
+      const sampleTimer = get()._sampleSaveTimer;
+      if (sampleTimer !== null) clearTimeout(sampleTimer);
+      const secretsTimer = get()._secretsSaveTimer;
+      if (secretsTimer !== null) clearTimeout(secretsTimer);
+      set((draft) => {
+        draft.config = null;
+        draft.isDirty = false;
+        draft.isLoading = false;
+        draft.error = null;
+        draft.loadedPresetName = null;
+        draft._syncTimer = null;
+        draft._syncGeneration = 0;
+        draft._conceptSaveTimer = null;
+        draft._sampleSaveTimer = null;
+        draft._secretsSaveTimer = null;
+      });
+    },
+  })),
+);
diff --git a/web/gui/src/renderer/store/trainingStore.ts b/web/gui/src/renderer/store/trainingStore.ts
new file mode 100644
index 000000000..b274afd59
--- /dev/null
+++ b/web/gui/src/renderer/store/trainingStore.ts
@@ -0,0 +1,160 @@
+import { create } from "zustand";
+
+import { trainingApi } from "@/api/trainingApi";
+import { useUiStore } from "@/store/uiStore";
+
+export type TrainingStatus = "idle" | "preparing" | "training" | "error";
+
+export interface TrainingProgress {
+  step: number;
+  maxStep: number;
+  epoch: number;
+  maxEpoch: number;
+  loss: number | null;
+  learningRate: number | null;
+  elapsedTime: number | null;
+  remainingTime: number | null;
+}
+
+export interface SampleEntry {
+  id: number;
+  url: string;
+}
+
+interface TrainingState {
+  status: TrainingStatus;
+  progress: TrainingProgress | null;
+  error: string | null;
+  statusText: string;
+  sampleUrls: SampleEntry[];
+  latestSample: string | null;
+  startTime: number | null;
+  nextSampleId: number;
+
+  setStatus: (status: TrainingStatus) => void;
+  setProgress: (progress: TrainingProgress) => void;
+  setError: (error: string | null) => void;
+  setStatusText: (text: string) => void;
+  addSampleUrl: (url: string) => void;
+  clearSamples: () => void;
+  reset: () => void;
+
+  fetchStatus: () => Promise<void>;
+
+  startTraining: (options?: { reattach?: boolean }) => Promise<void>;
+  stopTraining: () => Promise<void>;
+  sampleNow: () => Promise<void>;
+  backupNow: () => Promise<void>;
+  saveNow: () => Promise<void>;
+}
+
+const INITIAL_STATE: Pick<
+  TrainingState,
+  "status" | "progress" | "error" | "statusText" | "sampleUrls" | "latestSample" | "startTime" | "nextSampleId"
+> = {
+  status: "idle",
+  progress: null,
+  error: null,
+  statusText: "",
+  sampleUrls: [],
+  latestSample: null,
+  startTime: null,
+  nextSampleId: 0,
+};
+
+export const useTrainingStore = create<TrainingState>((set, get) => ({
+  ...INITIAL_STATE,
+
+  setStatus: (status) => set({ status }),
+  setProgress: (progress) => set({ progress }),
+  setError: (error) => set({ error }),
+  setStatusText: (text) => set({ statusText: text }),
+  addSampleUrl: (url) =>
+    set((s) => {
+      const entry: SampleEntry = { id: s.nextSampleId, url };
+      const urls = s.sampleUrls.length >= 50 ? [...s.sampleUrls.slice(1), entry] : [...s.sampleUrls, entry];
+      return { sampleUrls: urls, latestSample: url, nextSampleId: s.nextSampleId + 1 };
+    }),
+  clearSamples: () => set({ sampleUrls: [], latestSample: null }),
+  reset: () => set(INITIAL_STATE),
+
+  fetchStatus: async () => {
+    try {
+      const res = await trainingApi.getStatus();
+      if (res.status === "running") {
+        set({ status: "training" });
+      } else if (res.status === "stopping") {
+        set({ status: "training", statusText: "Stopping..." });
+      } else if (res.status === "error") {
+        set({ status: "error", error: res.error });
+      } else {
+        set({ status: "idle" });
+      }
+    } catch {
+      // backend unreachable
+    }
+  },
+
+  startTraining: async (options?: { reattach?: boolean }) => {
+    const { status } = get();
+    if (status === "training" || status === "preparing") return;
+
+    // Open the backend log panel so the terminal WebSocket mounts before the
+    // trainer emits its first output — otherwise early logs are dropped until
+    // the user opens the panel manually.
+    useUiStore.getState().setTerminalOpen(true);
+
+    set({
+      status: "preparing",
+      error: null,
+      statusText: options?.reattach ? "Reattaching..." : "Starting training...",
+    });
+
+    try {
+      const res = await trainingApi.start(options);
+      if (!res.ok) {
+        set({ status: "error", error: res.error, statusText: res.error ?? "Failed to start" });
+      } else {
+        set({ startTime: Date.now() });
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to start training";
+      set({ status: "error", error: message, statusText: message });
+    }
+  },
+
+  stopTraining: async () => {
+    try {
+      const res = await trainingApi.stop();
+      if (res.ok) {
+        set({ statusText: "Stopping..." });
+      }
+    } catch {
+      // status updates via WebSocket
+    }
+  },
+
+  sampleNow: async () => {
+    try {
+      await trainingApi.sample();
+    } catch {
+      // best effort
+    }
+  },
+
+  backupNow: async () => {
+    try {
+      await trainingApi.backup();
+    } catch {
+      // best effort
+    }
+  },
+
+  saveNow: async () => {
+    try {
+      await trainingApi.save();
+    } catch {
+      // best effort
+    }
+  },
+}));
diff --git a/web/gui/src/renderer/store/uiSchemaStore.ts b/web/gui/src/renderer/store/uiSchemaStore.ts
new file mode 100644
index 000000000..c80b2e97d
--- /dev/null
+++ b/web/gui/src/renderer/store/uiSchemaStore.ts
@@ -0,0 +1,53 @@
+import { create } from "zustand";
+
+import type { EnumDef, ModalDef, TabDef, UiSchema } from "@/types/uiSchema";
+
+interface UiSchemaState {
+  schema: UiSchema | null;
+  loading: boolean;
+  error: string | null;
+
+  loadSchema: () => Promise<void>;
+  getTab: (id: string) => TabDef | undefined;
+  getModal: (id: string) => ModalDef | undefined;
+  getEnum: (name: string) => EnumDef | undefined;
+  getPredicate: (name: string) => string[] | undefined;
+}
+
+function resolveSchemaUrl(): string {
+  if (typeof window !== "undefined" && window.location.protocol === "file:") {
+    return "./ui-schema.json";
+  }
+  return "/ui-schema.json";
+}
+
+export const useUiSchemaStore = create<UiSchemaState>((set, get) => ({
+  schema: null,
+  loading: false,
+  error: null,
+
+  loadSchema: async () => {
+    if (get().schema || get().loading) return;
+
+    set({ loading: true, error: null });
+    try {
+      const url = resolveSchemaUrl();
+      const res = await fetch(url);
+      if (!res.ok) {
+        throw new Error(`Failed to load UI schema: ${res.status} ${res.statusText}`);
+      }
+      const schema: UiSchema = await res.json();
+      set({ schema, loading: false });
+    } catch (err) {
+      set({
+        error: err instanceof Error ? err.message : String(err),
+        loading: false,
+      });
+    }
+  },
+
+  getTab: (id: string) => get().schema?.tabs.find((t) => t.id === id),
+  getModal: (id: string) => get().schema?.modals[id],
+  getEnum: (name: string) => get().schema?.enums[name],
+  getPredicate: (name: string) => get().schema?.predicates[name],
+}));
diff --git a/web/gui/src/renderer/store/uiStore.ts b/web/gui/src/renderer/store/uiStore.ts
new file mode 100644
index 000000000..afffd0062
--- /dev/null
+++ b/web/gui/src/renderer/store/uiStore.ts
@@ -0,0 +1,37 @@
+import { create } from "zustand";
+
+import { applyTheme, getInitialTheme, type Theme } from "../styles/theme";
+
+export type TabId = string;
+
+interface UiState {
+  activeTab: TabId;
+  theme: Theme;
+  backendConnected: boolean;
+  terminalOpen: boolean;
+  setActiveTab: (tab: TabId) => void;
+  toggleTheme: () => void;
+  setBackendConnected: (connected: boolean) => void;
+  setTerminalOpen: (open: boolean) => void;
+  toggleTerminal: () => void;
+}
+
+export const useUiStore = create<UiState>((set) => ({
+  activeTab: "general",
+  theme: getInitialTheme(),
+  backendConnected: false,
+  terminalOpen: false,
+
+  setActiveTab: (tab) => set({ activeTab: tab }),
+
+  toggleTheme: () =>
+    set((state) => {
+      const next: Theme = state.theme === "dark" ? "light" : "dark";
+      applyTheme(next);
+      return { theme: next };
+    }),
+
+  setBackendConnected: (connected) => set({ backendConnected: connected }),
+  setTerminalOpen: (open) => set({ terminalOpen: open }),
+  toggleTerminal: () => set((s) => ({ terminalOpen: !s.terminalOpen })),
+}));
diff --git a/web/gui/src/renderer/styles/app.css b/web/gui/src/renderer/styles/app.css
new file mode 100644
index 000000000..e9963cb1d
--- /dev/null
+++ b/web/gui/src/renderer/styles/app.css
@@ -0,0 +1,688 @@
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 24px;
+  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
+  backdrop-filter: blur(16px) saturate(120%);
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.top-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.top-bar-title {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 800;
+  margin: 0;
+  color: var(--color-azure-500);
+}
+
+.top-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.top-bar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--color-border-subtle);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
+.top-bar-select {
+  padding: 5px 28px 5px 10px;
+  font-size: var(--text-caption);
+  font-weight: 500;
+  border-radius: 6px;
+  background-color: var(--color-input-bg);
+  color: var(--color-on-surface);
+  border: 1px solid var(--color-border-subtle);
+  cursor: pointer;
+  transition:
+    border-color var(--trans-base),
+    background-color var(--trans-base),
+    box-shadow var(--trans-base);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  max-width: 250px;
+  line-height: 1.4;
+}
+
+.top-bar-select:hover {
+  border-color: var(--color-on-surface-secondary);
+  background-color: color-mix(in srgb, var(--color-input-bg) 80%, var(--color-cobalt-600) 4%);
+}
+
+.top-bar-select:focus-visible {
+  outline: none;
+  border-color: var(--color-cobalt-600);
+  box-shadow: 0 0 0 2px var(--color-cobalt-600-alpha-15);
+}
+
+.connection-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--text-label);
+  font-weight: 500;
+  padding: 3px 10px;
+  border-radius: 999px;
+  letter-spacing: 0.02em;
+}
+
+.connection-status::before {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.connection-status.connected {
+  color: var(--color-success-500);
+  background: var(--color-success-500-alpha-08);
+}
+
+.connection-status.connected::before {
+  background: var(--color-success-500);
+  box-shadow: 0 0 6px var(--color-success-500-alpha-40);
+  animation: connectedPulse 2s ease-in-out infinite;
+}
+
+@keyframes connectedPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 6px var(--color-success-500-alpha-40);
+  }
+  50% {
+    box-shadow: 0 0 10px var(--color-success-500-alpha-60);
+  }
+}
+
+.connection-status.disconnected {
+  color: var(--color-error-500);
+  background: var(--color-error-500-alpha-08);
+}
+
+.connection-status.disconnected::before {
+  background: var(--color-error-500);
+  box-shadow: 0 0 6px var(--color-error-500-alpha-40);
+}
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-input-bg);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--color-on-surface-secondary);
+  padding: 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: var(--text-caption);
+  font-weight: 500;
+  transition:
+    color var(--trans-base),
+    border-color var(--trans-base),
+    background-color var(--trans-base),
+    box-shadow var(--trans-base);
+}
+
+.theme-toggle:hover:not(:disabled) {
+  color: var(--color-on-surface);
+  border-color: var(--color-on-surface-secondary);
+  background-color: color-mix(in srgb, var(--color-input-bg) 80%, var(--color-cobalt-600) 6%);
+}
+
+.theme-toggle:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tab-nav {
+  display: flex;
+  gap: 2px;
+  padding: 0 24px;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border-subtle);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.tab-button {
+  font-family: var(--font-display);
+  background: transparent;
+  border: none;
+  padding: 10px 14px;
+  color: var(--color-on-surface-secondary);
+  font-size: var(--text-caption);
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+  transition:
+    color var(--trans-base),
+    background-color var(--trans-base);
+  border-radius: 6px 6px 0 0;
+}
+
+.tab-button:hover {
+  color: var(--color-on-surface);
+  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-cobalt-600) 6%);
+}
+
+.tab-button.active {
+  color: var(--color-cobalt-600);
+  background: transparent;
+}
+
+.tab-button.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 12px;
+  right: 12px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-cobalt-600), var(--color-azure-500));
+  border-radius: 1px 1px 0 0;
+  transform-origin: left center;
+  animation: var(--animate-tab-slide);
+}
+
+.tab-content {
+  flex: 1;
+  overflow-y: auto;
+  background: var(--color-surface-sunken);
+}
+
+.tab-content-inner {
+  max-width: var(--content-max-width);
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--content-padding-y) var(--content-padding-x);
+  box-sizing: border-box;
+}
+
+.tab-content-inner > * {
+  animation: var(--animate-section-reveal);
+}
+
+.tab-content-inner > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+.tab-content-inner > *:nth-child(2) {
+  animation-delay: 100ms;
+}
+.tab-content-inner > *:nth-child(3) {
+  animation-delay: 200ms;
+}
+.tab-content-inner > *:nth-child(4) {
+  animation-delay: 300ms;
+}
+.tab-content-inner > *:nth-child(5) {
+  animation-delay: 400ms;
+}
+.tab-content-inner > *:nth-child(6) {
+  animation-delay: 500ms;
+}
+.tab-content-inner > *:nth-child(7) {
+  animation-delay: 600ms;
+}
+.tab-content-inner > *:nth-child(8) {
+  animation-delay: 700ms;
+}
+.tab-content-inner > *:nth-child(9) {
+  animation-delay: 800ms;
+}
+.tab-content-inner > *:nth-child(10) {
+  animation-delay: 900ms;
+}
+
+@media (max-width: 1024px) {
+  .tab-content-inner {
+    padding: 24px 24px;
+  }
+}
+
+@media (max-width: 640px) {
+  .tab-content-inner {
+    padding: 16px 16px;
+  }
+}
+
+.bottom-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 24px;
+  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
+  backdrop-filter: blur(16px) saturate(120%);
+  border-top: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.bottom-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.bottom-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-display);
+  background: linear-gradient(135deg, var(--color-cobalt-600), var(--color-azure-500));
+  color: white;
+  border: none;
+  padding: 7px 18px;
+  border-radius: 6px;
+  font-size: var(--text-caption);
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    transform var(--trans-base),
+    box-shadow var(--trans-base),
+    opacity var(--trans-base);
+  letter-spacing: 0.01em;
+  position: relative;
+  overflow: hidden;
+}
+
+.action-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(255, 255, 255, 0.08) 45%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.08) 55%,
+    transparent 60%
+  );
+  background-size: 250% 100%;
+  animation: buttonShimmer 4s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes buttonShimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.action-button:hover:not(:disabled) {
+  transform: translateY(-1px) scale(1.03);
+  box-shadow:
+    0 4px 16px var(--color-cobalt-600-alpha-25),
+    0 2px 6px var(--color-cobalt-600-alpha-15);
+}
+
+.action-button:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px var(--color-cobalt-600-alpha-20);
+}
+
+.action-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.terminal-panel {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface-sunken, #080d1a);
+  border-top: 1px solid var(--color-border-subtle);
+  position: relative;
+  z-index: 9;
+  min-height: 120px;
+  overflow: hidden;
+  animation: terminalSlideIn 200ms ease-out;
+}
+
+@keyframes terminalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.terminal-panel-resize-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: ns-resize;
+  z-index: 1;
+}
+
+.terminal-panel-resize-handle:hover {
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-cobalt-600) 30%, transparent), transparent);
+}
+
+.terminal-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+  height: 32px;
+}
+
+.terminal-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-on-surface-secondary);
+  font-family: var(--font-mono, monospace);
+}
+
+.terminal-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.terminal-panel-xterm {
+  flex: 1;
+  padding: 4px 8px;
+  overflow: hidden;
+}
+
+.terminal-panel-xterm .xterm {
+  height: 100%;
+}
+
+.terminal-toggle-active {
+  color: var(--color-cobalt-600) !important;
+  border-color: var(--color-cobalt-600) !important;
+  background-color: color-mix(in srgb, var(--color-cobalt-600) 12%, transparent) !important;
+}
+
+.help-nav-link {
+  background: transparent;
+  color: var(--color-on-surface);
+  font-weight: 400;
+  border-right: 2px solid transparent;
+}
+
+.help-nav-link:hover {
+  background: var(--color-input-bg);
+}
+
+.help-nav-link-active {
+  background: linear-gradient(90deg, var(--color-cobalt-600-alpha-12), var(--color-azure-500-alpha-08));
+  color: var(--color-cobalt-600);
+  font-weight: 600;
+  border-right: 2px solid var(--color-cobalt-600);
+}
+
+.help-nav-link-active:hover {
+  background: linear-gradient(90deg, var(--color-cobalt-600-alpha-12), var(--color-azure-500-alpha-08));
+}
+
+.wiki-content {
+  font-family: var(--font-sans);
+  color: var(--color-on-surface);
+  line-height: 1.7;
+  font-size: var(--text-body);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.wiki-content h1 {
+  font-family: var(--font-display);
+  font-size: var(--text-h1);
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  padding-bottom: 8px;
+  border-bottom: 2px solid var(--color-border-subtle);
+  background: linear-gradient(135deg, var(--color-cobalt-600), var(--color-azure-500));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.wiki-content h2 {
+  font-family: var(--font-display);
+  font-size: var(--text-h2);
+  font-weight: 600;
+  margin: 32px 0 12px 0;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  color: var(--color-on-surface);
+}
+
+.wiki-content h3 {
+  font-size: var(--text-h3);
+  font-weight: 600;
+  margin: 24px 0 8px 0;
+  color: var(--color-on-surface);
+}
+
+.wiki-content h4 {
+  font-size: var(--text-body);
+  font-weight: 600;
+  margin: 20px 0 6px 0;
+  color: var(--color-on-surface);
+}
+
+.wiki-content p {
+  margin: 0 0 12px 0;
+}
+
+.wiki-content a {
+  color: var(--color-cobalt-600);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color var(--trans-base);
+}
+
+.wiki-content a:hover {
+  color: var(--color-azure-500);
+  text-decoration: underline;
+}
+
+.wiki-content code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-input-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border-subtle);
+}
+
+.wiki-content pre {
+  background: var(--color-input-bg);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  overflow-x: auto;
+  margin: 0 0 16px 0;
+}
+
+.wiki-content pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: var(--text-caption);
+  line-height: 1.5;
+}
+
+.wiki-content ul,
+.wiki-content ol {
+  margin: 0 0 12px 0;
+  padding-left: 24px;
+}
+
+.wiki-content li {
+  margin-bottom: 4px;
+}
+
+.wiki-content li > ul,
+.wiki-content li > ol {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.wiki-content blockquote {
+  border-left: 3px solid var(--color-cobalt-600);
+  margin: 0 0 12px 0;
+  padding: 8px 16px;
+  background: var(--color-input-bg);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  color: var(--color-on-surface-secondary);
+}
+
+.wiki-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.wiki-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 16px 0;
+  font-size: var(--text-small);
+}
+
+.wiki-content th {
+  background: var(--color-input-bg);
+  font-weight: 600;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border-subtle);
+}
+
+.wiki-content td {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border-subtle);
+}
+
+.wiki-content tr:nth-child(even) td {
+  background: color-mix(in srgb, var(--color-input-bg) 50%, transparent);
+}
+
+.wiki-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border-subtle);
+  margin: 24px 0;
+}
+
+.wiki-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+  margin: 8px 0;
+}
+
+.wiki-content strong {
+  font-weight: 600;
+  color: var(--color-on-surface);
+}
+
+.wiki-content em {
+  font-style: italic;
+}
+
+.font-display {
+  font-family: var(--font-display);
+}
+
+[data-theme="dark"] .app-shell::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.015;
+  background-image: url("data:image/svg+xml,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)'/></svg>");
+  background-repeat: repeat;
+  background-size: 256px 256px;
+}
+
+[data-theme="dark"] .tab-content {
+  background:
+    radial-gradient(ellipse at 20% 50%, var(--color-navy-800-alpha-08) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 80%, var(--color-sapphire-700-alpha-06) 0%, transparent 50%),
+    var(--color-surface-sunken);
+}
+
+.run-card-active {
+  border-color: var(--color-cobalt-600-alpha-20);
+  background: linear-gradient(135deg, var(--color-cobalt-600-alpha-04), var(--color-azure-500-alpha-04));
+}
+
+.status-badge-pulse {
+  background: currentColor;
+  animation: pulseAlive 2s infinite;
+}
+
+@keyframes pulseAlive {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 4px var(--color-success-500-alpha-30);
+  }
+  50% {
+    opacity: 0.5;
+    box-shadow: 0 0 8px var(--color-success-500-alpha-50);
+  }
+}
+
+.bottom-bar .progress-glow {
+  filter: drop-shadow(0 0 6px var(--color-cobalt-600-alpha-15));
+}
+
+@keyframes progressShimmer {
+  0% {
+    background-position:
+      -200% 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      200% 0,
+      0 0;
+  }
+}
diff --git a/web/gui/src/renderer/styles/globals.css b/web/gui/src/renderer/styles/globals.css
new file mode 100644
index 000000000..3907d8ba7
--- /dev/null
+++ b/web/gui/src/renderer/styles/globals.css
@@ -0,0 +1,337 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme {
+  --color-cobalt-600: #2563eb;
+  --color-azure-500: #38bdf8;
+  --color-navy-800: #1e3a5f;
+  --color-sapphire-700: #1d4ed8;
+  --color-frost-50: #f0f5ff;
+  --color-slate-950: #0b1120;
+
+  --color-success-500: #2dd4bf;
+  --color-warning-500: #fbbf24;
+  --color-error-500: #f87171;
+  --color-info-500: #7c8cff;
+
+  --color-cobalt-600-alpha-04: color-mix(in srgb, var(--color-cobalt-600) 4%, transparent);
+  --color-cobalt-600-alpha-06: color-mix(in srgb, var(--color-cobalt-600) 6%, transparent);
+  --color-cobalt-600-alpha-12: color-mix(in srgb, var(--color-cobalt-600) 12%, transparent);
+  --color-cobalt-600-alpha-15: color-mix(in srgb, var(--color-cobalt-600) 15%, transparent);
+  --color-cobalt-600-alpha-20: color-mix(in srgb, var(--color-cobalt-600) 20%, transparent);
+  --color-cobalt-600-alpha-25: color-mix(in srgb, var(--color-cobalt-600) 25%, transparent);
+  --color-cobalt-600-alpha-30: color-mix(in srgb, var(--color-cobalt-600) 30%, transparent);
+
+  --color-azure-500-alpha-04: color-mix(in srgb, var(--color-azure-500) 4%, transparent);
+  --color-azure-500-alpha-08: color-mix(in srgb, var(--color-azure-500) 8%, transparent);
+  --color-azure-500-alpha-30: color-mix(in srgb, var(--color-azure-500) 30%, transparent);
+
+  --color-success-500-alpha-06: color-mix(in srgb, var(--color-success-500) 6%, transparent);
+  --color-success-500-alpha-08: color-mix(in srgb, var(--color-success-500) 8%, transparent);
+  --color-success-500-alpha-15: color-mix(in srgb, var(--color-success-500) 15%, transparent);
+  --color-success-500-alpha-20: color-mix(in srgb, var(--color-success-500) 20%, transparent);
+  --color-success-500-alpha-30: color-mix(in srgb, var(--color-success-500) 30%, transparent);
+  --color-success-500-alpha-40: color-mix(in srgb, var(--color-success-500) 40%, transparent);
+  --color-success-500-alpha-50: color-mix(in srgb, var(--color-success-500) 50%, transparent);
+  --color-success-500-alpha-60: color-mix(in srgb, var(--color-success-500) 60%, transparent);
+
+  --color-error-500-alpha-08: color-mix(in srgb, var(--color-error-500) 8%, transparent);
+  --color-error-500-alpha-12: color-mix(in srgb, var(--color-error-500) 12%, transparent);
+  --color-error-500-alpha-15: color-mix(in srgb, var(--color-error-500) 15%, transparent);
+  --color-error-500-alpha-20: color-mix(in srgb, var(--color-error-500) 20%, transparent);
+  --color-error-500-alpha-40: color-mix(in srgb, var(--color-error-500) 40%, transparent);
+
+  --color-warning-500-alpha-06: color-mix(in srgb, var(--color-warning-500) 6%, transparent);
+  --color-warning-500-alpha-12: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
+  --color-warning-500-alpha-15: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
+
+  --color-navy-800-alpha-08: color-mix(in srgb, var(--color-navy-800) 8%, transparent);
+
+  --color-sapphire-700-alpha-06: color-mix(in srgb, var(--color-sapphire-700) 6%, transparent);
+
+  --color-surface: #f0f5ff;
+  --color-surface-sunken: #e8edf5;
+  --color-surface-raised: #ffffff;
+  --color-input-bg: #e8edf5;
+  --color-on-surface: #0f172a;
+  --color-on-surface-secondary: #475569;
+  --color-border-subtle: rgba(0, 0, 0, 0.06);
+  --color-border-focus: var(--color-cobalt-600);
+  --color-gradient-start: #2563eb;
+  --color-gradient-end: #38bdf8;
+  --color-logo-gradient-start: #2563eb;
+  --color-logo-gradient-end: #38bdf8;
+
+  --font-sans: "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, monospace;
+  --font-display: "Instrument Sans", "DM Sans", sans-serif;
+
+  --text-display: clamp(2.5rem, 5vw, 4.5rem);
+  --text-h1: clamp(1.75rem, 3vw, 2.5rem);
+  --text-h2: clamp(1.25rem, 2.5vw, 1.75rem);
+  --text-h3: 1.25rem;
+  --text-body: 1rem;
+  --text-small: 0.875rem;
+  --text-caption: 0.8125rem;
+  --text-caption--line-height: 1.25rem;
+  --text-micro: 0.75rem;
+  --text-label: 0.6875rem;
+  --text-label--line-height: 1rem;
+
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-full: 9999px;
+
+  --shadow-1: 0 2px 8px rgba(11, 17, 32, 0.08), 0 1px 2px rgba(11, 17, 32, 0.06);
+  --shadow-2: 0 4px 16px rgba(11, 17, 32, 0.12), 0 2px 4px rgba(11, 17, 32, 0.08);
+  --shadow-3: 0 8px 24px rgba(11, 17, 32, 0.16), 0 4px 8px rgba(11, 17, 32, 0.1);
+  --shadow-inset-focus: inset 0 0 0 1px var(--color-cobalt-600), 0 0 0 3px var(--color-cobalt-600-alpha-15);
+
+  --content-max-width: 1400px;
+  --content-padding-x: 40px;
+  --content-padding-y: 32px;
+
+  --animate-shimmer: shimmer 1s linear infinite;
+  --animate-row-fade: rowFade 0.2s ease-out;
+  --animate-pulse-error: pulseError 2s infinite;
+  --animate-tab-slide: tabSlide 250ms ease-out;
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  @keyframes rowFade {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes pulseError {
+    0%,
+    100% {
+      text-shadow: 0 0 0 transparent;
+    }
+    50% {
+      text-shadow: 0 0 6px var(--color-error-500);
+    }
+  }
+
+  @keyframes tabSlide {
+    from {
+      transform: scaleX(0);
+      opacity: 0;
+    }
+    to {
+      transform: scaleX(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sectionReveal {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  --animate-section-reveal: sectionReveal 300ms ease-out both;
+  --animate-path-draw: pathDraw 250ms ease-out;
+}
+
+@keyframes pathDraw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.icon-path-draw svg {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  animation: var(--animate-path-draw);
+}
+
+[data-theme="dark"] {
+  --color-surface: #0b1120;
+  --color-surface-sunken: #080d1a;
+  --color-surface-raised: #131b2e;
+  --color-input-bg: #101828;
+  --color-on-surface: #f1f5f9;
+  --color-on-surface-secondary: #94a3b8;
+  --color-border-subtle: rgba(255, 255, 255, 0.08);
+  --color-border-focus: var(--color-cobalt-600);
+  --color-gradient-start: #1e3a5f;
+  --color-gradient-end: #1d4ed8;
+  --color-logo-gradient-start: #2563eb;
+  --color-logo-gradient-end: #38bdf8;
+  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
+  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.2);
+  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.24);
+  color-scheme: dark;
+}
+
+:root {
+  --trans-base: 200ms ease-out;
+  --spacing-unit: 8px;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-surface);
+  color: var(--color-on-surface);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition:
+    background-color 800ms ease,
+    color 800ms ease;
+  color-scheme: light;
+}
+
+code,
+pre,
+.mono {
+  font-family: var(--font-mono);
+}
+
+table,
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-subtle) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-subtle);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-on-surface-secondary);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.card {
+  background: var(--color-surface-raised);
+  backdrop-filter: blur(12px) saturate(110%);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: var(--shadow-1);
+  border-radius: var(--radius-sm);
+  transition:
+    box-shadow var(--trans-base),
+    transform var(--trans-base);
+}
+
+[data-theme="dark"] .card {
+  background: rgba(19, 27, 46, 0.65);
+  border-color: rgba(255, 255, 255, 0.06);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-2);
+  transform: translateY(-2px);
+}
+
+.card.card-static:hover {
+  transform: none;
+  box-shadow: var(--shadow-1);
+}
+
+*:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 2px var(--color-cobalt-600),
+    0 0 0 4px var(--color-azure-500);
+}
+
+.gradient-accent {
+  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-border-subtle) 25%,
+    rgba(255, 255, 255, 0.05) 50%,
+    var(--color-border-subtle) 75%
+  );
+  background-size: 200% 100%;
+  animation: var(--animate-shimmer);
+  border-radius: var(--radius-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --color-cobalt-600: #2563eb;
+    --color-azure-500: #38bdf8;
+    --color-border-subtle: #888;
+    --color-on-surface-secondary: #555;
+  }
+
+  [data-theme="dark"] {
+    --color-border-subtle: #999;
+    --color-on-surface-secondary: #ccc;
+  }
+
+  .card,
+  .card-static {
+    border-width: 2px;
+  }
+
+  .tab-button.active::after {
+    background: var(--color-cobalt-600) !important;
+  }
+  .top-bar-title {
+    color: var(--color-cobalt-600) !important;
+  }
+  .action-button {
+    background: var(--color-cobalt-600) !important;
+  }
+}
diff --git a/web/gui/src/renderer/styles/theme.ts b/web/gui/src/renderer/styles/theme.ts
new file mode 100644
index 000000000..6748ad0da
--- /dev/null
+++ b/web/gui/src/renderer/styles/theme.ts
@@ -0,0 +1,15 @@
+export type Theme = "light" | "dark";
+
+const STORAGE_KEY = "theme";
+
+export function getInitialTheme(): Theme {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark") return stored;
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function applyTheme(theme: Theme): void {
+  document.body.setAttribute("data-theme", theme);
+  localStorage.setItem(STORAGE_KEY, theme);
+}
diff --git a/web/gui/src/renderer/types/electron.d.ts b/web/gui/src/renderer/types/electron.d.ts
new file mode 100644
index 000000000..36c3389c6
--- /dev/null
+++ b/web/gui/src/renderer/types/electron.d.ts
@@ -0,0 +1,7 @@
+import type { ElectronAPI } from "../../shared/electron-api";
+
+declare global {
+  interface Window {
+    electronAPI?: ElectronAPI;
+  }
+}
diff --git a/web/gui/src/renderer/types/uiSchema.ts b/web/gui/src/renderer/types/uiSchema.ts
new file mode 100644
index 000000000..5f0b342ff
--- /dev/null
+++ b/web/gui/src/renderer/types/uiSchema.ts
@@ -0,0 +1,94 @@
+export type Condition =
+  | { field: string; eq: string }
+  | { field: string; neq: string }
+  | { field: string; in: string[] }
+  | { field: string; notIn: string[] }
+  | { predicate: string }
+  | { and: Condition[] }
+  | { or: Condition[] }
+  | { not: Condition };
+
+export type FieldType =
+  | "entry"
+  | "file"
+  | "dir"
+  | "toggle"
+  | "select"
+  | "select-kv"
+  | "select-adv"
+  | "time-entry"
+  | "layer-filter"
+  | "button"
+  | "label";
+
+export interface FieldDef {
+  key: string;
+  label: string;
+  type: FieldType;
+  tooltip?: string;
+  inputType?: "text" | "number";
+  nullable?: boolean;
+  enumRef?: string;
+  dtypeSubset?: string;
+  options?: Array<{ label: string; value: string }>;
+  modal?: string;
+  visibility?: Condition;
+  valuePath?: string;
+  unitPath?: string;
+  filterPath?: string;
+  presetPath?: string;
+  regexPath?: string;
+  action?: string;
+  stringOptions?: string[];
+}
+
+export interface SectionDef {
+  id: string;
+  label: string;
+  fields: FieldDef[];
+  visibility?: Condition;
+}
+
+export interface ColumnDef {
+  sections: string[];
+}
+
+export interface VariantDef {
+  when: Condition;
+  columns: ColumnDef[];
+}
+
+export interface TabDef {
+  id: string;
+  label: string;
+  renderer: "schema" | "custom";
+  layout?: "single-column" | "three-column";
+  visibility?: Condition;
+  sections?: SectionDef[];
+  variants?: VariantDef[];
+  sectionDefs?: Record<string, SectionDef>;
+}
+
+export interface ModalDef {
+  title: string;
+  renderer?: string;
+  sections?: SectionDef[];
+}
+
+export interface EnumDef {
+  values: string[];
+  labels: Record<string, string>;
+}
+
+export interface UiSchema {
+  $version: number;
+  generated_at?: string;
+  predicates: Record<string, string[]>;
+  enums: Record<string, EnumDef>;
+  dtypeSubsets: Record<string, Array<{ label: string; value: string }>>;
+  tabs: TabDef[];
+  modals: Record<string, ModalDef>;
+  optimizerDefaults: Record<string, Record<string, unknown>>;
+  optimizerKeyDetails: Record<string, { title: string; tooltip: string; type: string }>;
+  trainingMethodsByModel: Record<string, string[]>;
+}
diff --git a/web/gui/src/renderer/utils/chartUtils.ts b/web/gui/src/renderer/utils/chartUtils.ts
new file mode 100644
index 000000000..00cf411d3
--- /dev/null
+++ b/web/gui/src/renderer/utils/chartUtils.ts
@@ -0,0 +1,36 @@
+export function niceStep(range: number, targetTicks: number): number {
+  const rough = range / targetTicks;
+  const mag = Math.pow(10, Math.floor(Math.log10(rough)));
+  const normalized = rough / mag;
+  let nice: number;
+  if (normalized <= 1.5) nice = 1;
+  else if (normalized <= 3) nice = 2;
+  else if (normalized <= 7) nice = 5;
+  else nice = 10;
+  return nice * mag;
+}
+
+export function generateTicks(min: number, max: number, targetTicks: number): number[] {
+  if (min === max) return [min];
+  const step = niceStep(max - min, targetTicks);
+  const start = Math.floor(min / step) * step;
+  const ticks: number[] = [];
+  for (let t = start; t <= max + step * 0.01; t += step) {
+    ticks.push(t);
+  }
+  return ticks;
+}
+
+export function formatValue(v: number): string {
+  if (Math.abs(v) >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
+  if (Math.abs(v) >= 1e3) return `${(v / 1e3).toFixed(1)}k`;
+  if (Math.abs(v) < 0.001 && v !== 0) return v.toExponential(1);
+  if (Number.isInteger(v)) return v.toString();
+  return v.toPrecision(4);
+}
+
+export function formatStep(s: number): string {
+  if (s >= 1e6) return `${(s / 1e6).toFixed(1)}M`;
+  if (s >= 1e3) return `${(s / 1e3).toFixed(1)}k`;
+  return s.toString();
+}
diff --git a/web/gui/src/renderer/utils/conditionEval.ts b/web/gui/src/renderer/utils/conditionEval.ts
new file mode 100644
index 000000000..91ef7ce58
--- /dev/null
+++ b/web/gui/src/renderer/utils/conditionEval.ts
@@ -0,0 +1,50 @@
+import type { Condition } from "@/types/uiSchema";
+
+export function evaluateCondition(
+  condition: Condition | undefined,
+  config: Record<string, unknown>,
+  predicates: Record<string, string[]>,
+): boolean {
+  if (!condition) return true;
+
+  if ("eq" in condition) {
+    return getField(config, condition.field) === condition.eq;
+  }
+  if ("neq" in condition) {
+    return getField(config, condition.field) !== condition.neq;
+  }
+  if ("in" in condition) {
+    return condition.in.includes(String(getField(config, condition.field) ?? ""));
+  }
+  if ("notIn" in condition) {
+    return !condition.notIn.includes(String(getField(config, condition.field) ?? ""));
+  }
+  if ("predicate" in condition) {
+    const group = predicates[condition.predicate];
+    if (!group) return false;
+    return group.includes(String(getField(config, "model_type") ?? ""));
+  }
+  if ("and" in condition) {
+    return condition.and.every((c) => evaluateCondition(c, config, predicates));
+  }
+  if ("or" in condition) {
+    return condition.or.some((c) => evaluateCondition(c, config, predicates));
+  }
+  if ("not" in condition) {
+    return !evaluateCondition(condition.not, config, predicates);
+  }
+
+  return true;
+}
+
+function getField(config: Record<string, unknown>, path: string): unknown {
+  const keys = path.split(".");
+  let current: unknown = config;
+  for (const key of keys) {
+    if (current === null || current === undefined || typeof current !== "object") {
+      return undefined;
+    }
+    current = (current as Record<string, unknown>)[key];
+  }
+  return current;
+}
diff --git a/web/gui/src/renderer/utils/enumLabels.ts b/web/gui/src/renderer/utils/enumLabels.ts
new file mode 100644
index 000000000..f25c640cd
--- /dev/null
+++ b/web/gui/src/renderer/utils/enumLabels.ts
@@ -0,0 +1 @@
+export { enumLabel } from "@/types/generated/enumLabels";
diff --git a/web/gui/src/renderer/utils/formatDuration.ts b/web/gui/src/renderer/utils/formatDuration.ts
new file mode 100644
index 000000000..30d49aba9
--- /dev/null
+++ b/web/gui/src/renderer/utils/formatDuration.ts
@@ -0,0 +1,8 @@
+export function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}h ${m}m ${s}s`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
diff --git a/web/gui/src/renderer/utils/inputStyles.ts b/web/gui/src/renderer/utils/inputStyles.ts
new file mode 100644
index 000000000..7ab65df65
--- /dev/null
+++ b/web/gui/src/renderer/utils/inputStyles.ts
@@ -0,0 +1,45 @@
+export const INPUT_BASE = [
+  "px-3 py-1.5 text-sm leading-snug rounded-[6px]",
+  "bg-[var(--color-input-bg)] text-[var(--color-on-surface)]",
+  "border border-[var(--color-border-subtle)]",
+  "shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]",
+  "ring-0",
+  "transition-[border-color,box-shadow,background-color] duration-200 ease-out",
+  "hover:border-[var(--color-on-surface-secondary)] hover:bg-[color-mix(in_srgb,var(--color-input-bg)_94%,var(--color-cobalt-600)_6%)]",
+  "focus:border-[var(--color-cobalt-600)] focus:shadow-[var(--shadow-inset-focus)] focus:outline-none",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+].join(" ");
+
+export const INPUT_FULL = `w-full ${INPUT_BASE}`;
+
+export const INPUT_FLEX = `flex-1 ${INPUT_BASE}`;
+
+export const SELECT_FULL = `${INPUT_FULL} cursor-pointer`;
+
+export const SELECT_FLEX = `${INPUT_FLEX} cursor-pointer`;
+
+export const SELECT_BASE = `${INPUT_BASE} cursor-pointer`;
+
+export const SIDE_BUTTON = [
+  "px-2 py-1.5 rounded-[6px] border border-[var(--color-border-subtle)]",
+  "bg-[var(--color-input-bg)] text-[var(--color-on-surface-secondary)]",
+  "hover:text-[var(--color-on-surface)] hover:border-[var(--color-on-surface-secondary)]",
+  "transition-[border-color,color,background-color] duration-200 ease-out cursor-pointer",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+].join(" ");
+
+export const TEXTAREA_BASE = [
+  "px-3 py-2 text-sm leading-snug rounded-[6px]",
+  "bg-[var(--color-input-bg)] text-[var(--color-on-surface)]",
+  "border border-[var(--color-border-subtle)]",
+  "shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]",
+  "ring-0",
+  "transition-[border-color,box-shadow,background-color] duration-200 ease-out",
+  "hover:border-[var(--color-on-surface-secondary)] hover:bg-[color-mix(in_srgb,var(--color-input-bg)_94%,var(--color-cobalt-600)_6%)]",
+  "focus:border-[var(--color-cobalt-600)] focus:shadow-[var(--shadow-inset-focus)] focus:outline-none",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+].join(" ");
+
+export const TEXTAREA_FULL = `w-full ${TEXTAREA_BASE}`;
+
+export const PLACEHOLDER = "placeholder:text-[var(--color-on-surface-secondary)]";
diff --git a/web/gui/src/renderer/utils/markdown.ts b/web/gui/src/renderer/utils/markdown.ts
new file mode 100644
index 000000000..cbe3b6af8
--- /dev/null
+++ b/web/gui/src/renderer/utils/markdown.ts
@@ -0,0 +1,276 @@
+import DOMPurify from "dompurify";
+
+const SANITIZE_CONFIG: DOMPurify.Config = {
+  ALLOWED_TAGS: [
+    "p",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "a",
+    "img",
+    "ul",
+    "ol",
+    "li",
+    "code",
+    "pre",
+    "em",
+    "strong",
+    "del",
+    "blockquote",
+    "table",
+    "tr",
+    "td",
+    "th",
+    "thead",
+    "tbody",
+    "br",
+    "hr",
+    "div",
+    "span",
+  ],
+  ALLOWED_ATTR: ["href", "src", "alt", "class", "id", "loading", "target", "rel"],
+  ALLOW_DATA_ATTR: false,
+};
+
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A") {
+    const href = node.getAttribute("href") ?? "";
+    const isExternal = href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//");
+    if (isExternal) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+});
+
+export function sanitizeHtml(dirty: string): string {
+  return DOMPurify.sanitize(dirty, SANITIZE_CONFIG as Parameters<typeof DOMPurify.sanitize>[1]);
+}
+
+export function escapeHtml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+export function isSafeHref(uri: string): boolean {
+  // eslint-disable-next-line no-control-regex -- Intentionally strip ASCII control chars (0x00-0x1F) and space to prevent URI obfuscation attacks
+  const normalized = uri.replace(/[\x00-\x20]+/g, "").toLowerCase();
+  return /^https?:\/\//.test(normalized) || /^mailto:/.test(normalized) || normalized.startsWith("#");
+}
+
+export function isSafeSrc(uri: string): boolean {
+  // eslint-disable-next-line no-control-regex -- Intentionally strip ASCII control chars (0x00-0x1F) and space to prevent URI obfuscation attacks
+  const normalized = uri.replace(/[\x00-\x20]+/g, "").toLowerCase();
+  return (
+    /^https?:\/\//.test(normalized) ||
+    /^data:image\/(png|jpeg|jpg|gif|webp|avif|bmp)[;,]/.test(normalized) ||
+    normalized.startsWith("/api/")
+  );
+}
+
+export function inlineMarkdown(line: string): string {
+  const parts = line.split(/(<[^>]+>)/g);
+  let result = parts
+    .map((part) => {
+      if (/^<[^>]+>$/.test(part)) return part;
+      return escapeHtml(part);
+    })
+    .join("");
+
+  result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt: string, url: string) =>
+    isSafeSrc(url) ? `<img src="${url}" alt="${alt}" loading="lazy" />` : "",
+  );
+
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text: string, url: string) =>
+    isSafeHref(url) ? `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>` : text,
+  );
+
+  result = result.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
+  result = result.replace(/___(.+?)___/g, "<strong><em>$1</em></strong>");
+
+  result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  result = result.replace(/__(.+?)__/g, "<strong>$1</strong>");
+
+  result = result.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  result = result.replace(/(?<!\w)_(.+?)_(?!\w)/g, "<em>$1</em>");
+
+  result = result.replace(/~~(.+?)~~/g, "<del>$1</del>");
+
+  result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+  return result;
+}
+
+function isHtmlLine(line: string): boolean {
+  return /^\s*<(?:img|div|p|br|hr|details|summary|table|tr|td|th|thead|tbody|figcaption|figure|picture|source|video|iframe)\b/i.test(
+    line.trim(),
+  );
+}
+
+export function markdownToHtml(md: string): string {
+  const lines = md.split("\n");
+  const html: string[] = [];
+  let i = 0;
+
+  const pushParagraph = (text: string) => {
+    if (text.trim()) {
+      html.push(`<p>${inlineMarkdown(text.trim())}</p>`);
+    }
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.startsWith("```")) {
+      const lang = line.slice(3).trim();
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(escapeHtml(lines[i]));
+        i++;
+      }
+      i++;
+      const langAttr = lang ? ` class="language-${escapeHtml(lang)}"` : "";
+      html.push(`<pre><code${langAttr}>${codeLines.join("\n")}</code></pre>`);
+      continue;
+    }
+
+    if (isHtmlLine(line)) {
+      const htmlBlock: string[] = [];
+      while (
+        i < lines.length &&
+        (isHtmlLine(lines[i]) || (htmlBlock.length > 0 && lines[i].trim() !== "" && !lines[i].startsWith("#")))
+      ) {
+        htmlBlock.push(lines[i]);
+        i++;
+        if (htmlBlock.length > 1 && /^\s*<\//.test(lines[i - 1])) break;
+      }
+      html.push(htmlBlock.join("\n"));
+      continue;
+    }
+
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      html.push(`<h${level}>${inlineMarkdown(headingMatch[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+      html.push("<hr />");
+      i++;
+      continue;
+    }
+
+    if (line.trim().startsWith("|") && line.trim().endsWith("|")) {
+      const tableRows: string[][] = [];
+      let hasHeader = false;
+
+      while (i < lines.length && lines[i].trim().startsWith("|") && lines[i].trim().endsWith("|")) {
+        const row = lines[i].trim();
+
+        if (/^\|[\s:]*-{2,}[\s:]*(\|[\s:]*-{2,}[\s:]*)*\|$/.test(row)) {
+          hasHeader = true;
+          i++;
+          continue;
+        }
+
+        const cells = row
+          .slice(1, -1)
+          .split("|")
+          .map((c) => c.trim());
+        tableRows.push(cells);
+        i++;
+      }
+
+      if (tableRows.length > 0) {
+        html.push("<table>");
+        tableRows.forEach((cells, rowIdx) => {
+          const isHeaderRow = hasHeader && rowIdx === 0;
+          const tag = isHeaderRow ? "th" : "td";
+          const rowHtml = cells.map((c) => `<${tag}>${inlineMarkdown(c)}</${tag}>`).join("");
+          if (isHeaderRow) {
+            html.push(`<thead><tr>${rowHtml}</tr></thead><tbody>`);
+          } else {
+            html.push(`<tr>${rowHtml}</tr>`);
+          }
+        });
+        if (hasHeader) {
+          html.push("</tbody>");
+        }
+        html.push("</table>");
+      }
+      continue;
+    }
+
+    if (line.startsWith("> ") || line === ">") {
+      const quoteLines: string[] = [];
+      while (i < lines.length && (lines[i].startsWith("> ") || lines[i] === ">")) {
+        quoteLines.push(lines[i].replace(/^>\s?/, ""));
+        i++;
+      }
+      html.push(`<blockquote>${markdownToHtml(quoteLines.join("\n"))}</blockquote>`);
+      continue;
+    }
+
+    if (/^(\s*)([-*+])\s+/.test(line)) {
+      const listItems: string[] = [];
+      while (i < lines.length && /^(\s*)([-*+])\s+/.test(lines[i])) {
+        const match = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
+        if (match) {
+          listItems.push(inlineMarkdown(match[3]));
+        }
+        i++;
+      }
+      html.push("<ul>");
+      listItems.forEach((item) => html.push(`<li>${item}</li>`));
+      html.push("</ul>");
+      continue;
+    }
+
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const listItems: string[] = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
+        const match = lines[i].match(/^\s*\d+\.\s+(.*)$/);
+        if (match) {
+          listItems.push(inlineMarkdown(match[1]));
+        }
+        i++;
+      }
+      html.push("<ol>");
+      listItems.forEach((item) => html.push(`<li>${item}</li>`));
+      html.push("</ol>");
+      continue;
+    }
+
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+
+    const paraLines: string[] = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== "" &&
+      !lines[i].startsWith("#") &&
+      !lines[i].startsWith("```") &&
+      !lines[i].startsWith("> ") &&
+      !lines[i].startsWith("| ") &&
+      !/^(\s*)([-*+])\s+/.test(lines[i]) &&
+      !/^\s*\d+\.\s+/.test(lines[i]) &&
+      !/^(-{3,}|\*{3,}|_{3,})\s*$/.test(lines[i]) &&
+      !isHtmlLine(lines[i])
+    ) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      pushParagraph(paraLines.join(" "));
+    }
+  }
+
+  return html.join("\n");
+}
diff --git a/web/gui/src/renderer/utils/timestepDistribution.ts b/web/gui/src/renderer/utils/timestepDistribution.ts
new file mode 100644
index 000000000..439e36db5
--- /dev/null
+++ b/web/gui/src/renderer/utils/timestepDistribution.ts
@@ -0,0 +1,192 @@
+import type { TimestepDistribution } from "@/types/generated/enums";
+
+const NUM_TRAIN_TIMESTEPS = 1000;
+const SAMPLE_COUNT = 200_000;
+
+export interface TimestepDistParams {
+  distribution: TimestepDistribution;
+  minNoisingStrength: number;
+  maxNoisingStrength: number;
+  noisingWeight: number;
+  noisingBias: number;
+  timestepShift: number;
+}
+
+/** Box-Muller transform: one sample from N(mean, std). */
+function normalSample(mean: number, std: number): number {
+  const u1 = Math.random();
+  const u2 = Math.random();
+  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2) * std + mean;
+}
+
+/**
+ * Marsaglia-Tsang sample from Gamma(shape, scale=1), shape > 0.
+ * Used to build a general Beta(alpha, beta) sampler via X/(X+Y) with X~Gamma(alpha), Y~Gamma(beta),
+ * mirroring what `torch.distributions.Beta` does internally.
+ */
+function gammaSample(shape: number): number {
+  if (shape < 1) {
+    // Boost by 1 and correct with a Uniform(0,1)^(1/shape) factor.
+    const u = Math.random();
+    return gammaSample(1 + shape) * u ** (1 / shape);
+  }
+
+  const d = shape - 1 / 3;
+  const c = 1 / Math.sqrt(9 * d);
+
+  for (;;) {
+    let x: number;
+    let v: number;
+    do {
+      x = normalSample(0, 1);
+      v = (1 + c * x) ** 3;
+    } while (v <= 0);
+
+    const u = Math.random();
+    if (u < 1 - 0.0331 * x ** 4) return d * v;
+    if (Math.log(u) < 0.5 * x ** 2 + d * (1 - v + Math.log(v))) return d * v;
+  }
+}
+
+/** One sample from Beta(alpha, beta) via the Gamma-ratio construction. */
+function betaSample(alpha: number, beta: number): number {
+  const x = gammaSample(alpha);
+  const y = gammaSample(beta);
+  return x / (x + y);
+}
+
+/**
+ * Compute a 1000-bin histogram of the timestep distribution.
+ * Faithful port of ModelSetupNoiseMixin._get_timestep_discrete.
+ *
+ * Continuous distributions (UNIFORM, LOGIT_NORMAL, HEAVY_TAIL, BETA) are Monte-Carlo
+ * sampled. Discrete distributions (COS_MAP, SIGMOID, INVERTED_PARABOLA) return
+ * exact probability weights scaled to match the sample count.
+ */
+export function computeTimestepHistogram(params: TimestepDistParams): Float64Array {
+  const {
+    distribution,
+    minNoisingStrength,
+    maxNoisingStrength,
+    noisingWeight,
+    noisingBias,
+    timestepShift: shift,
+  } = params;
+
+  const N = NUM_TRAIN_TIMESTEPS;
+  const minT = Math.floor(N * minNoisingStrength);
+  const maxT = Math.floor(N * maxNoisingStrength);
+  const numT = maxT - minT;
+  const bins = new Float64Array(N);
+
+  if (numT <= 0) return bins;
+
+  if (
+    distribution === "UNIFORM" ||
+    distribution === "LOGIT_NORMAL" ||
+    distribution === "HEAVY_TAIL" ||
+    distribution === "BETA"
+  ) {
+    // BETA (B-TTDM): Noising Weight -> alpha, Noising Bias -> beta (matches Python's mapping).
+    const betaAlpha = Math.max(1e-4, noisingWeight);
+    const betaBeta = Math.max(1e-4, noisingBias);
+
+    for (let i = 0; i < SAMPLE_COUNT; i++) {
+      let t: number;
+
+      if (distribution === "UNIFORM") {
+        t = minT + (maxT - minT) * Math.random();
+      } else if (distribution === "LOGIT_NORMAL") {
+        const bias = noisingBias;
+        const scale = noisingWeight + 1.0;
+        const logitNormal = 1 / (1 + Math.exp(-normalSample(bias, scale)));
+        t = logitNormal * numT + minT;
+      } else if (distribution === "HEAVY_TAIL") {
+        const scale = noisingWeight;
+        let u = Math.random();
+        u = 1.0 - u - scale * (Math.cos((Math.PI / 2.0) * u) ** 2 - 1.0 + u);
+        t = u * numT + minT;
+      } else {
+        // BETA. Mirrors the three branches in ModelSetupNoiseMixin._get_timestep_discrete:
+        // beta==1 and alpha==1 use closed-form inverse-CDF sampling; the general case
+        // falls back to a full Beta(alpha, beta) sample (Python uses torch.distributions.Beta).
+        let u: number;
+        if (Math.abs(betaBeta - 1.0) < 1e-5) {
+          u = Math.random() ** (1.0 / betaAlpha);
+        } else if (Math.abs(betaAlpha - 1.0) < 1e-5) {
+          u = 1.0 - Math.random() ** (1.0 / betaBeta);
+        } else {
+          u = betaSample(betaAlpha, betaBeta);
+        }
+        t = u * numT + minT;
+      }
+
+      // Apply timestep shift (matches Python: N * shift * t / ((shift-1)*t + N))
+      t = (N * shift * t) / ((shift - 1) * t + N);
+      bins[Math.floor(Math.min(Math.max(t, 0), N - 1))]++;
+    }
+  } else {
+    // Discrete distributions: compute probability weights directly.
+    // Equivalent to multinomial sampling with infinite samples.
+    const n = numT;
+
+    // Inverse-shifted linspace and its derivative (matches Python exactly)
+    const ls = new Float64Array(n);
+    const lsDeriv = new Float64Array(n);
+    for (let i = 0; i < n; i++) {
+      const x = n > 1 ? i / (n - 1) : 0;
+      const denom = shift - shift * x + x; // shift*(1-x) + x
+      ls[i] = denom !== 0 ? x / denom : 0;
+      const denomD = shift + x - x * shift; // same expression, different variable name in Python
+      lsDeriv[i] = denomD !== 0 ? shift / denomD ** 2 : 0;
+    }
+
+    const weights = new Float64Array(n);
+
+    if (distribution === "COS_MAP") {
+      for (let i = 0; i < n; i++) {
+        const v = ls[i];
+        const denom = Math.PI - 2.0 * Math.PI * v + 2.0 * Math.PI * v * v;
+        weights[i] = denom !== 0 ? (2.0 / denom) * lsDeriv[i] : 0;
+      }
+    } else if (distribution === "SIGMOID") {
+      const bias = noisingBias + 0.5;
+      const weight = noisingWeight;
+      for (let i = 0; i < n; i++) {
+        const v = ls[i];
+        // Python applies the shift formula again to already-shifted linspace
+        const denom = shift - shift * v + v;
+        const w = denom !== 0 ? v / denom : 0;
+        weights[i] = (1 / (1 + Math.exp(-weight * (w - bias)))) * lsDeriv[i];
+      }
+    } else {
+      // INVERTED_PARABOLA
+      const bias = noisingBias + 0.5;
+      const weight = noisingWeight;
+      for (let i = 0; i < n; i++) {
+        const v = ls[i];
+        weights[i] = Math.max(-weight * (v - bias) ** 2 + 2, 0) * lsDeriv[i];
+      }
+    }
+
+    // Filter NaN / Infinity
+    for (let i = 0; i < n; i++) {
+      if (!isFinite(weights[i])) weights[i] = 0;
+    }
+
+    // Normalize and map to bins (index i → timestep i + minT)
+    let total = 0;
+    for (let i = 0; i < n; i++) total += weights[i];
+
+    if (total > 0) {
+      for (let i = 0; i < n; i++) {
+        const bin = i + minT;
+        if (bin >= 0 && bin < N) {
+          bins[bin] = (weights[i] / total) * SAMPLE_COUNT;
+        }
+      }
+    }
+  }
+
+  return bins;
+}
diff --git a/web/gui/src/renderer/utils/tooltips.ts b/web/gui/src/renderer/utils/tooltips.ts
new file mode 100644
index 000000000..1bece831c
--- /dev/null
+++ b/web/gui/src/renderer/utils/tooltips.ts
@@ -0,0 +1 @@
+export { getTooltip, FIELD_TOOLTIPS as TOOLTIPS } from "@/types/generated/tooltips";
diff --git a/web/gui/src/renderer/vite-env.d.ts b/web/gui/src/renderer/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/web/gui/src/renderer/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web/gui/src/shared/brandColors.ts b/web/gui/src/shared/brandColors.ts
new file mode 100644
index 000000000..82bd3075b
--- /dev/null
+++ b/web/gui/src/shared/brandColors.ts
@@ -0,0 +1,26 @@
+export const COBALT_600 = "#2563EB";
+export const AZURE_500 = "#38BDF8";
+export const NAVY_800 = "#1E3A5F";
+export const SAPPHIRE_700 = "#1D4ED8";
+export const FROST_50 = "#F0F5FF";
+export const SLATE_950 = "#0B1120";
+
+export const SUCCESS_500 = "#2DD4BF";
+export const WARNING_500 = "#FBBF24";
+export const ERROR_500 = "#F87171";
+export const INFO_500 = "#7C8CFF";
+
+export const SURFACE_DARK = SLATE_950;
+export const SURFACE_SUNKEN_DARK = "#080D1A";
+export const SURFACE_RAISED_DARK = "#131B2E";
+export const INPUT_BG_DARK = "#101828";
+
+export const ON_SURFACE_DARK = "#F1F5F9";
+export const ON_SURFACE_SECONDARY_DARK = "#94A3B8";
+
+export const SURFACE_LIGHT = FROST_50;
+export const SURFACE_SUNKEN_LIGHT = "#E8EDF5";
+export const SURFACE_RAISED_LIGHT = "#FFFFFF";
+
+export const ON_SURFACE_LIGHT = "#0F172A";
+export const ON_SURFACE_SECONDARY_LIGHT = "#475569";
diff --git a/web/gui/src/shared/electron-api.ts b/web/gui/src/shared/electron-api.ts
new file mode 100644
index 000000000..ba59c74df
--- /dev/null
+++ b/web/gui/src/shared/electron-api.ts
@@ -0,0 +1,26 @@
+export interface PlatformInfo {
+  platform: string;
+  isPackaged: boolean;
+  version: string;
+  projectRoot: string;
+}
+
+export interface FileFilter {
+  name: string;
+  extensions: string[];
+}
+
+export interface ElectronAPI {
+  isElectron: true;
+  platform: string;
+  openFile: (filters?: FileFilter[]) => Promise<string | null>;
+  openDirectory: () => Promise<string | null>;
+  saveFile: (defaultPath?: string, filters?: FileFilter[]) => Promise<string | null>;
+  getAppPath: () => Promise<string>;
+  restartBackend: () => Promise<boolean>;
+  getPlatformInfo: () => Promise<PlatformInfo>;
+  getBackendPort: () => Promise<number>;
+  openMaskEditor: (folder?: string) => Promise<boolean>;
+  onFlushRequest: (handler: (requestId: string) => Promise<void> | void) => () => void;
+  signalFlushComplete: (requestId: string) => void;
+}
diff --git a/web/gui/src/shared/ipc-channels.ts b/web/gui/src/shared/ipc-channels.ts
new file mode 100644
index 000000000..4a34f0862
--- /dev/null
+++ b/web/gui/src/shared/ipc-channels.ts
@@ -0,0 +1,14 @@
+export const IPC_CHANNELS = {
+  OPEN_FILE: "dialog:openFile",
+  OPEN_DIRECTORY: "dialog:openDirectory",
+  SAVE_FILE: "dialog:saveFile",
+  GET_APP_PATH: "app:getPath",
+  RESTART_BACKEND: "backend:restart",
+  GET_PLATFORM_INFO: "app:getPlatformInfo",
+  GET_BACKEND_PORT: "backend:getPort",
+  OPEN_MASK_EDITOR: "tools:openMaskEditor",
+  FLUSH_REQUEST: "lifecycle:flushRequest",
+  FLUSH_COMPLETE: "lifecycle:flushComplete",
+} as const;
+
+export type IpcChannel = (typeof IPC_CHANNELS)[keyof typeof IPC_CHANNELS];
diff --git a/web/gui/tsconfig.json b/web/gui/tsconfig.json
new file mode 100644
index 000000000..14edc9ab0
--- /dev/null
+++ b/web/gui/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/renderer/*"],
+      "@shared/*": ["src/shared/*"]
+    }
+  },
+  "include": ["src/renderer/**/*", "src/shared/**/*"],
+  "exclude": ["node_modules", "dist", "e2e"]
+}
diff --git a/web/gui/tsconfig.main.json b/web/gui/tsconfig.main.json
new file mode 100644
index 000000000..d10f0431d
--- /dev/null
+++ b/web/gui/tsconfig.main.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist/main",
+    "rootDir": "src"
+  },
+  "include": ["src/main/**/*", "src/shared/**/*"]
+}
diff --git a/web/gui/vite.config.ts b/web/gui/vite.config.ts
new file mode 100644
index 000000000..cfa10d204
--- /dev/null
+++ b/web/gui/vite.config.ts
@@ -0,0 +1,59 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { rmSync, writeFileSync } from "fs";
+import { resolve } from "path";
+import { defineConfig, type Plugin } from "vite";
+
+const PORT_FILE = resolve(__dirname, ".vite-port");
+
+// Vite auto-increments past `server.port` when it's taken (strictPort is not
+// set), but Electron's main process is a separate process that needs to know
+// which port it actually landed on. This plugin writes the resolved port to
+// a file next to this config once the dev server starts listening, so
+// Electron (and the dev launch script) can discover it instead of assuming
+// the preferred port was available.
+function writeResolvedPortPlugin(): Plugin {
+  return {
+    name: "write-resolved-port",
+    configureServer(server) {
+      // Clear any stale port file from a previous run *before* this server
+      // finishes binding, so a poller watching for the file never reads a
+      // leftover value from an instance that already exited.
+      rmSync(PORT_FILE, { force: true });
+      server.httpServer?.once("listening", () => {
+        const address = server.httpServer?.address();
+        if (address && typeof address === "object") {
+          writeFileSync(PORT_FILE, String(address.port), "utf-8");
+        }
+      });
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), writeResolvedPortPlugin()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src/renderer"),
+      "@shared": resolve(__dirname, "src/shared"),
+    },
+  },
+  root: ".",
+  base: "./",
+  build: {
+    outDir: "dist/renderer",
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:8000",
+        changeOrigin: true,
+      },
+      "/ws": {
+        target: "ws://127.0.0.1:8000",
+        ws: true,
+      },
+    },
+  },
+});
diff --git a/web/scripts/check_hardcoded_options.py b/web/scripts/check_hardcoded_options.py
new file mode 100644
index 000000000..179b706d7
--- /dev/null
+++ b/web/scripts/check_hardcoded_options.py
@@ -0,0 +1,135 @@
+"""Guardrail: fail CI/pre-commit if a `<Select options={...}>` is fed by a
+hardcoded array or object-literal list that lives outside the generated types.
+
+The allowed sources are:
+  - imports from `@/types/generated/` (enums.ts, dropdownSources.ts, etc.)
+  - inline references to generated `*Values` arrays, `DTYPE_SUBSETS`, or schema-
+    driven `stringOptions` / `kvOptions` via `SchemaField`
+  - dynamic props resolved at runtime (`options={someState}`)
+
+What this check catches:
+  - `options={[ ... ]}` JSX props with a literal array
+  - `options={FOO}` where `FOO` is a `const` array defined in the same file
+    outside `types/generated/`
+
+Run with:
+    python -m web.scripts.check_hardcoded_options
+"""
+
+from __future__ import annotations
+
+import os
+import re
+import sys
+from pathlib import Path
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+RENDERER_ROOT = REPO_ROOT / "web" / "gui" / "src" / "renderer"
+GENERATED_DIR = RENDERER_ROOT / "types" / "generated"
+
+# Match `options={...}` JSX prop. We use a non-greedy match that stops at the
+# matching `}` — good enough because the value is always a single JSX expression.
+_OPTIONS_PROP_RE = re.compile(r"options=\{([^}]+)\}")
+
+# Match a local `const NAME = [ ... ]` or `const NAME: Type = [ ... ]` assignment.
+_CONST_ARRAY_RE = re.compile(
+    r"^\s*const\s+([A-Z_][A-Z0-9_]*)\s*(?::[^=]+)?=\s*\[",
+    re.MULTILINE,
+)
+
+
+def _strip_comments(src: str) -> str:
+    """Remove // line comments and /* block */ comments — regex-level, good enough
+    for scanning options= props without parsing TS."""
+    src = re.sub(r"//.*?$", "", src, flags=re.MULTILINE)
+    src = re.sub(r"/\*.*?\*/", "", src, flags=re.DOTALL)
+    return src
+
+
+def _collect_local_const_arrays(src: str) -> set[str]:
+    return set(_CONST_ARRAY_RE.findall(src))
+
+
+def _scan_file(path: Path) -> list[tuple[int, str]]:
+    """Return a list of (line_number, offending_snippet) for violations in `path`."""
+    violations: list[tuple[int, str]] = []
+    raw = path.read_text(encoding="utf-8")
+    src = _strip_comments(raw)
+    local_const_arrays = _collect_local_const_arrays(src)
+
+    # Build a line-number index so we can report useful locations.
+    line_starts = [0]
+    for i, ch in enumerate(raw):
+        if ch == "\n":
+            line_starts.append(i + 1)
+
+    def line_for_offset(offset: int) -> int:
+        # Binary search — line_starts is sorted
+        lo, hi = 0, len(line_starts) - 1
+        while lo < hi:
+            mid = (lo + hi + 1) // 2
+            if line_starts[mid] <= offset:
+                lo = mid
+            else:
+                hi = mid - 1
+        return lo + 1
+
+    for match in _OPTIONS_PROP_RE.finditer(src):
+        expr = match.group(1).strip()
+        # 1. Inline array: options={[ ... ]} — flag only if it contains literal
+        # entries (string literal, label:/value: object). Pure-spread arrays like
+        # `[...NoiseSchedulerValues]` are fine: the spread source must be a
+        # generated *Values array (imports are audited separately below).
+        if expr.startswith("["):
+            inner = expr[1:].rsplit("]", 1)[0]
+            if re.search(r"""['"]|\blabel\s*:""", inner):
+                violations.append((line_for_offset(match.start()), match.group(0)))
+            continue
+        # 2. Reference to a file-local const array — only flag if that const lives
+        # in this file AND is uppercase-SNAKE (the convention for option arrays).
+        ident = expr.lstrip(".").split(".")[0]
+        if ident in local_const_arrays:
+            violations.append((line_for_offset(match.start()), match.group(0)))
+
+    return violations
+
+
+def _should_scan(path: Path) -> bool:
+    if path.suffix not in (".ts", ".tsx"):
+        return False
+    try:
+        rel = path.relative_to(GENERATED_DIR)
+    except ValueError:
+        return True
+    _ = rel
+    return False
+
+
+def main() -> int:
+    all_violations: list[tuple[Path, int, str]] = []
+    for root, _dirs, files in os.walk(RENDERER_ROOT):
+        for name in files:
+            path = Path(root) / name
+            if not _should_scan(path):
+                continue
+            for line_no, snippet in _scan_file(path):
+                all_violations.append((path, line_no, snippet))
+
+    if not all_violations:
+        print("OK: no hardcoded <Select options> arrays outside types/generated/")
+        return 0
+
+    print("FAIL: hardcoded dropdown options detected outside types/generated/")
+    print("      (move the list into web/scripts/ui_metadata.py or a Python source")
+    print("      that generate_types.py AST-parses, then re-run the generator)\n")
+    for path, line_no, snippet in all_violations:
+        try:
+            rel = path.relative_to(REPO_ROOT).as_posix()
+        except ValueError:
+            rel = str(path)
+        print(f"  {rel}:{line_no}: {snippet}")
+    return 1
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/web/scripts/generate_types.py b/web/scripts/generate_types.py
new file mode 100644
index 000000000..c8a430ddb
--- /dev/null
+++ b/web/scripts/generate_types.py
@@ -0,0 +1,1437 @@
+import ast
+import importlib
+import inspect
+import json
+import os
+import re
+import sys
+from enum import Enum
+from typing import Any, get_args, get_origin
+
+PROJECT_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", ".."))
+sys.path.insert(0, PROJECT_ROOT)
+
+from modules.util.config.BaseConfig import BaseConfig
+from modules.util.type_util import issubclass_safe
+
+_incomplete_generation = False
+
+# --- Prettier-compliant emit helpers -----------------------------------------
+# These produce TypeScript that Prettier (printWidth 120, double quotes,
+# trailingComma: all, quoteProps: as-needed) treats as a no-op, so the generated
+# files stay consistent with the project's formatter without a post-format pass.
+
+_PRETTIER_WIDTH = 120
+
+_JS_RESERVED = frozenset({
+    "break", "case", "catch", "class", "const", "continue", "debugger", "default",
+    "delete", "do", "else", "enum", "export", "extends", "false", "finally", "for",
+    "function", "if", "import", "in", "instanceof", "new", "null", "return", "super",
+    "switch", "this", "throw", "true", "try", "typeof", "var", "void", "while", "with",
+    "yield", "let", "static", "implements", "interface", "package", "private",
+    "protected", "public", "await", "async",
+})
+
+_JS_IDENT_RE = re.compile(r"^[A-Za-z_$][A-Za-z0-9_$]*$")
+
+
+def _js_key(key: str) -> str:
+    """Quote object-literal keys only when required (matches Prettier quoteProps: as-needed)."""
+    if _JS_IDENT_RE.match(key) and key not in _JS_RESERVED:
+        return key
+    return json.dumps(key)
+
+
+def _ts_string(s: str) -> str:
+    """Quote a string the way Prettier does: prefer double quotes, switch to single when the
+    string contains more double quotes than single (to minimise backslash escapes)."""
+    double = s.count('"')
+    single = s.count("'")
+    if double > single:
+        # Emit single-quoted with escaping for backslashes and single quotes.
+        escaped = s.replace("\\", "\\\\").replace("'", "\\'")
+        return f"'{escaped}'"
+    return json.dumps(s, ensure_ascii=False)
+
+
+def _ts_number(value: float) -> str:
+    """Format a number the way Prettier normalises it (strip leading zero in exponent, keep int-like
+    floats with trailing .0 exactly as JSON emits them)."""
+    rendered = json.dumps(value)
+    # Prettier normalises `1e-08` -> `1e-8`, `3e+06` -> `3e6`, `2.5e+01` -> `2.5e1`.
+    return re.sub(r"e([+-]?)0*(\d)", r"e\1\2", rendered).replace("e+", "e")
+
+
+def _emit_entry(key: str, value: str, indent: str = "  ") -> list[str]:
+    """Emit a single object-literal `key: value,` entry, wrapping if the line exceeds 120 chars."""
+    single = f"{indent}{_js_key(key)}: {value},"
+    if len(single) <= _PRETTIER_WIDTH:
+        return [single]
+    return [f"{indent}{_js_key(key)}:", f"{indent}  {value},"]
+
+
+def _emit_array(items: list[str], prefix: str, indent: str = "") -> list[str]:
+    """Emit an array literal — single-line if the full `{prefix}[{items}]` fits, else multi-line.
+    `indent` is the whitespace prefix on the line where `prefix` starts; items are indented +2."""
+    single = f"{prefix}[{', '.join(items)}]"
+    if len(single) <= _PRETTIER_WIDTH:
+        return [single]
+    lines = [f"{prefix}["]
+    item_indent = indent + "  "
+    lines.extend(f"{item_indent}{item}," for item in items)
+    lines.append(f"{indent}]")
+    return lines
+
+
+def _emit_union_type(name: str, values: list[str]) -> list[str]:
+    """Emit `export type Name = "a" | "b";` on one line if it fits, else multi-line with leading pipes."""
+    quoted = [_ts_string(v) for v in values]
+    single = f"export type {name} = {' | '.join(quoted)};"
+    if len(single) <= _PRETTIER_WIDTH:
+        return [single]
+    lines = [f"export type {name} ="]
+    for i, q in enumerate(quoted):
+        suffix = ";" if i == len(quoted) - 1 else ""
+        lines.append(f"  | {q}{suffix}")
+    return lines
+
+
+def _emit_values_const(name: str, values: list[str]) -> list[str]:
+    """Emit `export const NameValues: Name[] = [...];` single-line if it fits, else multi-line."""
+    quoted = [_ts_string(v) for v in values]
+    prefix = f"export const {name}Values: {name}[] = "
+    block = _emit_array(quoted, prefix)
+    if len(block) == 1:
+        return [f"{block[0]};"]
+    block[-1] = f"{block[-1]};"
+    return block
+
+OUTPUT_DIR = os.path.join(
+    PROJECT_ROOT, "web", "gui", "src", "renderer", "types", "generated"
+)
+
+ENUM_DIR = os.path.join(PROJECT_ROOT, "modules", "util", "enum")
+CONFIG_DIR = os.path.join(PROJECT_ROOT, "modules", "util", "config")
+
+_KNOWN_ENUM_MODULES = {
+    "modules.util.enum.AudioFormat",
+    "modules.util.enum.DataType",
+    "modules.util.enum.ModelType",
+    "modules.util.enum.Optimizer",
+    "modules.util.enum.TrainingMethod",
+}
+
+_KNOWN_CONFIG_CLASSES = {
+    "TrainConfig", "TrainOptimizerConfig", "TrainModelPartConfig",
+    "TrainEmbeddingConfig", "QuantizationConfig", "ConceptConfig",
+    "ConceptImageConfig", "ConceptTextConfig", "SampleConfig",
+    "CloudConfig", "CloudSecretsConfig", "SecretsConfig",
+}
+
+
+def discover_enum_modules() -> list[str]:
+    modules = []
+    for filename in sorted(os.listdir(ENUM_DIR)):
+        if filename.startswith("_") or not filename.endswith(".py"):
+            continue
+        module_name = filename[:-3]
+        module_path = f"modules.util.enum.{module_name}"
+        modules.append(module_path)
+    return modules
+
+
+def discover_config_classes() -> list[tuple[str, type]]:
+    configs = []
+    seen = set()
+    for filename in sorted(os.listdir(CONFIG_DIR)):
+        if filename.startswith("_") or not filename.endswith(".py"):
+            continue
+        module_name = filename[:-3]
+        module_path = f"modules.util.config.{module_name}"
+        try:
+            mod = importlib.import_module(module_path)
+        except Exception:
+            continue
+        for attr_name in dir(mod):
+            obj = getattr(mod, attr_name)
+            if (
+                isinstance(obj, type)
+                and issubclass_safe(obj, BaseConfig)
+                and obj is not BaseConfig
+                and hasattr(obj, "default_values")
+                and attr_name not in seen
+            ):
+                seen.add(attr_name)
+                configs.append((attr_name, obj))
+    return configs
+
+
+ENUM_MODULES = discover_enum_modules()
+
+_missing_enums = _KNOWN_ENUM_MODULES - set(ENUM_MODULES)
+if _missing_enums:
+    raise RuntimeError(f"Dynamic enum scan missed known modules: {_missing_enums}")
+
+
+def collect_enums() -> list[tuple[str, type]]:
+    enums = []
+    for module_path in ENUM_MODULES:
+        mod = importlib.import_module(module_path)
+        for name, obj in inspect.getmembers(mod, inspect.isclass):
+            if issubclass(obj, Enum) and obj is not Enum:
+                enums.append((name, obj))
+    return enums
+
+
+def collect_configs() -> list[tuple[str, type]]:
+    configs = discover_config_classes()
+    found_names = {name for name, _ in configs}
+    missing = _KNOWN_CONFIG_CLASSES - found_names
+    if missing:
+        raise RuntimeError(f"Dynamic config scan missed known classes: {missing}")
+    return configs
+
+
+def python_type_to_ts(py_type: type, nullable: bool, enum_names: set[str]) -> str:
+    if py_type is str:
+        ts = "string"
+    elif py_type is bool:
+        ts = "boolean"
+    elif py_type is int or py_type is float:
+        ts = "number"
+    elif py_type is dict:
+        ts = "Record<string, unknown>"
+    elif issubclass_safe(py_type, Enum) or issubclass_safe(py_type, BaseConfig):
+        ts = py_type.__name__
+    elif py_type is list or get_origin(py_type) is list:
+        args = get_args(py_type)
+        if args:
+            inner = args[0]
+            if issubclass_safe(inner, BaseConfig) or issubclass_safe(inner, Enum):
+                ts = f"{inner.__name__}[]"
+            elif inner is str:
+                ts = "string[]"
+            elif inner is int or inner is float:
+                ts = "number[]"
+            elif inner is bool:
+                ts = "boolean[]"
+            elif get_origin(inner) is dict:
+                dict_args = get_args(inner)
+                if dict_args and len(dict_args) == 2:
+                    key_ts = python_type_to_ts(dict_args[0], False, enum_names)
+                    val_ts = python_type_to_ts(dict_args[1], False, enum_names)
+                    # array-type: array-simple requires Array<T> when T is a complex type
+                    ts = f"Array<Record<{key_ts}, {val_ts}>>"
+                else:
+                    ts = "Array<Record<string, unknown>>"
+            else:
+                ts = "unknown[]"
+        else:
+            ts = "unknown[]"
+    elif get_origin(py_type) is dict:
+        args = get_args(py_type)
+        if args and len(args) == 2:
+            key_ts = python_type_to_ts(args[0], False, enum_names)
+            val_ts = python_type_to_ts(args[1], False, enum_names)
+            ts = f"Record<{key_ts}, {val_ts}>"
+        else:
+            ts = "Record<string, unknown>"
+    else:
+        ts = "unknown"
+
+    if nullable:
+        ts = f"{ts} | null"
+
+    return ts
+
+
+def generate_enums_ts(enums: list[tuple[str, type]]) -> str:
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when backend enums change.",
+        "",
+    ]
+
+    for name, enum_cls in sorted(enums, key=lambda x: x[0]):
+        values = [member.value for member in enum_cls]
+        lines.extend(_emit_union_type(name, values))
+        lines.append("")
+        lines.extend(_emit_values_const(name, values))
+        lines.append("")
+
+    return "\n".join(lines)
+
+
+def generate_config_ts(
+    configs: list[tuple[str, type]], enum_names: set[str]
+) -> str:
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when backend config classes change.",
+        "",
+        "import type {",
+    ]
+
+    used_enums = set()
+    for _class_name, cls in configs:
+        instance = cls.default_values()
+        for field_type in instance.types.values():
+            if issubclass_safe(field_type, Enum):
+                used_enums.add(field_type.__name__)
+            elif get_origin(field_type) is list:
+                args = get_args(field_type)
+                if args and issubclass_safe(args[0], Enum):
+                    used_enums.add(args[0].__name__)
+            elif get_origin(field_type) is dict:
+                args = get_args(field_type)
+                if args:
+                    for arg in args:
+                        if issubclass_safe(arg, Enum):
+                            used_enums.add(arg.__name__)
+
+    # simple-import-sort/imports uses case-insensitive ordering within a named-import block.
+    lines.extend(f"  {enum_name}," for enum_name in sorted(used_enums, key=str.lower))
+    lines.append('} from "./enums";')
+    lines.append("")
+
+    generated = set()
+
+    def generate_interface(class_name: str, cls: type):
+        if class_name in generated:
+            return ""
+        generated.add(class_name)
+
+        result_lines = []
+
+        instance = cls.default_values()
+        for field_type in instance.types.values():
+            if issubclass_safe(field_type, BaseConfig) and field_type.__name__ not in generated:
+                for cn, cc in configs:
+                    if cn == field_type.__name__:
+                        dep = generate_interface(cn, cc)
+                        if dep:
+                            result_lines.append(dep)
+                        break
+            elif get_origin(field_type) is list:
+                args = get_args(field_type)
+                if args and issubclass_safe(args[0], BaseConfig) and args[0].__name__ not in generated:
+                    for cn, cc in configs:
+                        if cn == args[0].__name__:
+                            dep = generate_interface(cn, cc)
+                            if dep:
+                                result_lines.append(dep)
+                            break
+            elif get_origin(field_type) is dict:
+                args = get_args(field_type)
+                if args and len(args) > 1 and issubclass_safe(args[1], BaseConfig) and args[1].__name__ not in generated:
+                    for cn, cc in configs:
+                        if cn == args[1].__name__:
+                            dep = generate_interface(cn, cc)
+                            if dep:
+                                result_lines.append(dep)
+                            break
+
+        iface_lines = [f"export interface {class_name} {{"]
+
+        for field_name in instance.types:
+            field_type = instance.types[field_name]
+            nullable = instance.nullables.get(field_name, False)
+            ts_type = python_type_to_ts(field_type, nullable, enum_names)
+            iface_lines.append(f"  {field_name}: {ts_type};")
+
+        iface_lines.append("}")
+        iface_lines.append("")
+
+        result_lines.append("\n".join(iface_lines))
+        return "\n".join(result_lines)
+
+    for class_name, cls in configs:
+        result = generate_interface(class_name, cls)
+        if result:
+            lines.append(result)
+
+    return "\n".join(lines)
+
+
+def generate_metadata_ts(
+    configs: list[tuple[str, type]], enum_names: set[str]
+) -> str:
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when backend config classes change.",
+        "",
+        "export interface FieldMetadata {",
+        '  type: "string" | "number" | "boolean" | "enum" | "config" | "list" | "dict";',
+        "  nullable: boolean;",
+        "  enumType?: string;",
+        "  configType?: string;",
+        "  defaultValue: unknown;",
+        "}",
+        "",
+        "export type ConfigMetadata = Record<string, FieldMetadata>;",
+        "",
+    ]
+
+    for class_name, cls in configs:
+        instance = cls.default_values()
+        lines.append(f"export const {class_name}Metadata: ConfigMetadata = {{")
+
+        for field_name in instance.types:
+            field_type = instance.types[field_name]
+            nullable = instance.nullables.get(field_name, False)
+            default_value = instance.default_values.get(field_name)
+
+            if field_type is str:
+                meta_type = "string"
+                enum_type = None
+                config_type = None
+            elif field_type is bool:
+                meta_type = "boolean"
+                enum_type = None
+                config_type = None
+            elif field_type is int or field_type is float:
+                meta_type = "number"
+                enum_type = None
+                config_type = None
+            elif issubclass_safe(field_type, Enum):
+                meta_type = "enum"
+                enum_type = field_type.__name__
+                config_type = None
+            elif issubclass_safe(field_type, BaseConfig):
+                meta_type = "config"
+                enum_type = None
+                config_type = field_type.__name__
+            elif field_type is list or get_origin(field_type) is list:
+                meta_type = "list"
+                enum_type = None
+                config_type = None
+                args = get_args(field_type)
+                if args and issubclass_safe(args[0], BaseConfig):
+                    config_type = args[0].__name__
+            elif field_type is dict or get_origin(field_type) is dict:
+                meta_type = "dict"
+                enum_type = None
+                config_type = None
+                args = get_args(field_type)
+                if args and len(args) > 1 and issubclass_safe(args[1], BaseConfig):
+                    config_type = args[1].__name__
+            else:
+                meta_type = "string"
+                enum_type = None
+                config_type = None
+
+            if default_value is None:
+                default_json = "null"
+            elif isinstance(default_value, bool):
+                default_json = "true" if default_value else "false"
+            elif isinstance(default_value, (int, float)):
+                if default_value == float("inf"):
+                    default_json = '"Infinity"'
+                elif default_value == float("-inf"):
+                    default_json = '"-Infinity"'
+                else:
+                    default_json = _ts_number(default_value)
+            elif isinstance(default_value, str):
+                default_json = _ts_string(default_value)
+            elif isinstance(default_value, Enum):
+                default_json = json.dumps(str(default_value))
+            elif isinstance(default_value, BaseConfig):
+                default_json = "null"
+            elif isinstance(default_value, list):
+                default_json = "[]"
+            elif isinstance(default_value, dict):
+                default_json = "{}"
+            else:
+                default_json = "null"
+
+            parts = [f'type: "{meta_type}"', f"nullable: {str(nullable).lower()}"]
+            if enum_type:
+                parts.append(f'enumType: "{enum_type}"')
+            if config_type:
+                parts.append(f'configType: "{config_type}"')
+            parts.append(f"defaultValue: {default_json}")
+
+            single = f"  {_js_key(field_name)}: {{ {', '.join(parts)} }},"
+            if len(single) <= _PRETTIER_WIDTH:
+                lines.append(single)
+            else:
+                lines.append(f"  {_js_key(field_name)}: {{")
+                lines.extend(f"    {part}," for part in parts)
+                lines.append("  },")
+
+        lines.append("};")
+        lines.append("")
+
+    return "\n".join(lines)
+
+
+def _safe_call_method(obj: object, method_name: str) -> bool:
+    try:
+        return bool(getattr(obj, method_name)())
+    except TypeError:
+        return False
+
+
+def generate_model_type_info_ts(enums: list[tuple[str, type]]) -> str:
+    from modules.util.enum.ModelType import ModelType
+    from modules.util.enum.TrainingMethod import TrainingMethod
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when backend ModelType or TopBar logic changes.",
+        "",
+        'import type { ModelType, TrainingMethod } from "./enums";',
+        "",
+    ]
+
+    # inspect.getmembers doesn't find these due to Enum metaclass; use __dict__
+    group_methods = []
+    for name, obj in ModelType.__dict__.items():
+        if name.startswith(("is_", "has_")) and callable(obj):
+            group_methods.append(name)
+    group_methods.sort()
+
+    lines.append("/** Model type groupings derived from ModelType.is_*() / has_*() methods. */")
+    lines.append("export const MODEL_TYPE_GROUPS: Record<string, ModelType[]> = {")
+    for method_name in group_methods:
+        members_in_group = [
+            mt.value for mt in ModelType if _safe_call_method(mt, method_name)
+        ]
+        if members_in_group:
+            quoted = [json.dumps(m) for m in members_in_group]
+            prefix = f"  {_js_key(method_name)}: "
+            block = _emit_array(quoted, prefix, indent="  ")
+            block[-1] = f"{block[-1]},"
+            lines.extend(block)
+    lines.append("};")
+    lines.append("")
+
+    lines.append("/** Reverse lookup: for any ModelType, which groups it belongs to. */")
+    lines.append("export const MODEL_TYPE_FLAGS: Record<ModelType, string[]> = {")
+    for mt in ModelType:
+        flags = [
+            method_name for method_name in group_methods
+            if _safe_call_method(mt, method_name)
+        ]
+        quoted = [json.dumps(f) for f in flags]
+        prefix = f"  {_js_key(mt.value)}: "
+        block = _emit_array(quoted, prefix, indent="  ")
+        block[-1] = f"{block[-1]},"
+        lines.extend(block)
+    lines.append("};")
+    lines.append("")
+
+    lines.append("/** Allowed training methods per model type (from TopBar.py). */")
+    lines.append("export const TRAINING_METHODS_BY_MODEL: Record<ModelType, TrainingMethod[]> = {")
+    for mt in ModelType:
+        if mt.is_stable_diffusion():
+            methods = [TrainingMethod.FINE_TUNE, TrainingMethod.LORA, TrainingMethod.EMBEDDING, TrainingMethod.FINE_TUNE_VAE]
+        elif (mt.is_stable_diffusion_3() or mt.is_stable_diffusion_xl() or mt.is_wuerstchen()
+              or mt.is_pixart() or mt.is_flux_1() or mt.is_sana()
+              or mt.is_hunyuan_video() or mt.is_hi_dream() or mt.is_chroma()):
+            methods = [TrainingMethod.FINE_TUNE, TrainingMethod.LORA, TrainingMethod.EMBEDDING]
+        elif mt.is_qwen() or mt.is_z_image() or mt.is_flux_2() or mt.is_ernie():
+            methods = [TrainingMethod.FINE_TUNE, TrainingMethod.LORA]
+        else:
+            methods = [TrainingMethod.FINE_TUNE, TrainingMethod.LORA, TrainingMethod.EMBEDDING]
+        quoted = [json.dumps(m.value) for m in methods]
+        prefix = f"  {_js_key(mt.value)}: "
+        block = _emit_array(quoted, prefix, indent="  ")
+        block[-1] = f"{block[-1]},"
+        lines.extend(block)
+    lines.append("};")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def _find_layer_presets_attr(cls: type) -> dict | None:
+    for ancestor in cls.__mro__:
+        if "LAYER_PRESETS" in ancestor.__dict__:
+            value = ancestor.__dict__["LAYER_PRESETS"]
+            if isinstance(value, dict):
+                return value
+    return None
+
+
+def _normalize_layer_preset_value(value: Any) -> dict[str, Any]:
+    # BaseZImageSetup uses {'patterns': [...], 'regex': True}; others use list[str].
+    if isinstance(value, dict):
+        patterns = value.get("patterns", []) or []
+        return {"patterns": [str(p) for p in patterns], "regex": bool(value.get("regex", False))}
+    if isinstance(value, (list, tuple)):
+        return {"patterns": [str(p) for p in value], "regex": False}
+    return {"patterns": [str(value)], "regex": False}
+
+
+def generate_layer_presets_ts() -> str:
+    """Emit LAYER_PRESETS_BY_MODEL derived from Base*Setup.LAYER_PRESETS.
+
+    Keyed by ModelType — presets live on the Base*Setup family class and are
+    inherited by every LoRA/FineTune/Embedding subclass, so TrainingMethod is
+    irrelevant here. Mirrors CTk behavior in modules/ui/TrainingTab.py and
+    modules/ui/ModelTab.py which both read `cls.LAYER_PRESETS` from
+    `create.get_model_setup_class(model_type, training_method)`.
+    """
+    global _incomplete_generation
+
+    from modules.util.enum.ModelType import ModelType
+
+    presets_by_model: dict[str, dict[str, dict[str, Any]]] = {}
+
+    try:
+        from modules.modelSetup.BaseModelSetup import BaseModelSetup
+        from modules.util import create as _create_side_effects  # noqa: F401
+        from modules.util import factory
+
+        registry = factory.__dict__.get("__registry", {}).get(BaseModelSetup, [])
+        seen: set[ModelType] = set()
+        for args, _kwargs, cls in registry:
+            if not args:
+                continue
+            mt = args[0]
+            if not isinstance(mt, ModelType) or mt in seen:
+                continue
+            raw = _find_layer_presets_attr(cls)
+            if raw is None:
+                continue
+            presets_by_model[mt.value] = {
+                str(k): _normalize_layer_preset_value(v) for k, v in raw.items()
+            }
+            seen.add(mt)
+    except Exception as e:
+        print(f"  WARNING: Could not enumerate LAYER_PRESETS from factory registry ({e})")
+        print("  Layer preset map will be empty.")
+        print("  Run from the OneTrainer venv for complete output: python -m web.scripts.generate_types")
+        _incomplete_generation = True
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when backend Base*Setup.LAYER_PRESETS change.",
+        "",
+        'import type { ModelType } from "./enums";',
+        "",
+        "export interface LayerPresetDef {",
+        "  patterns: string[];",
+        "  regex: boolean;",
+        "}",
+        "",
+        "export type LayerPresetMap = Record<string, LayerPresetDef>;",
+        "",
+        "/** Fallback preset map used when a ModelType has no registered BaseSetup. */",
+        "export const EMPTY_PRESETS: LayerPresetMap = {",
+        "  full: { patterns: [], regex: false },",
+        "};",
+        "",
+        "/**",
+        " * Per-ModelType layer-filter presets sourced from Base*Setup.LAYER_PRESETS.",
+        " * Selecting a preset should write both the joined patterns to layer_filter",
+        " * and the regex flag to layer_filter_regex, matching the CTk UI behavior.",
+        " */",
+        "export const LAYER_PRESETS_BY_MODEL: Partial<Record<ModelType, LayerPresetMap>> = {",
+    ]
+
+    for mt_value in sorted(presets_by_model.keys()):
+        preset_map = presets_by_model[mt_value]
+        lines.append(f"  {_js_key(mt_value)}: {{")
+        for preset_name in preset_map:
+            defn = preset_map[preset_name]
+            quoted_patterns = [json.dumps(p) for p in defn["patterns"]]
+            regex_str = "true" if defn["regex"] else "false"
+            patterns_inline = f"[{', '.join(quoted_patterns)}]"
+            value = f"{{ patterns: {patterns_inline}, regex: {regex_str} }}"
+            single = f"    {_js_key(preset_name)}: {value},"
+            if len(single) <= _PRETTIER_WIDTH:
+                lines.append(single)
+            else:
+                lines.append(f"    {_js_key(preset_name)}: {{")
+                patterns_prefix = "      patterns: "
+                patterns_block = _emit_array(quoted_patterns, patterns_prefix, indent="      ")
+                patterns_block[-1] = f"{patterns_block[-1]},"
+                lines.extend(patterns_block)
+                lines.append(f"      regex: {regex_str},")
+                lines.append("    },")
+        lines.append("  },")
+
+    lines.append("};")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def generate_loss_weight_info_ts() -> str:
+    """Emit a map of LossWeight -> supports_flow_matching boolean.
+
+    Mirrors CTk behavior in modules/ui/TrainingTab.py, which filters the
+    loss_weight_fn dropdown so only entries whose supports_flow_matching()
+    matches the current model's is_flow_matching() (plus CONSTANT) are shown.
+    """
+    from modules.util.enum.LossWeight import LossWeight
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when LossWeight.supports_flow_matching changes.",
+        "",
+        'import type { LossWeight } from "./enums";',
+        "",
+        "/**",
+        " * Maps each LossWeight value to whether it supports flow-matching models.",
+        " * Sourced from LossWeight.supports_flow_matching() in",
+        " * modules/util/enum/LossWeight.py. Used by the schema renderer to filter",
+        " * the loss_weight_fn dropdown per the current model_type.",
+        " */",
+        "export const LOSS_WEIGHT_SUPPORTS_FLOW_MATCHING: Record<LossWeight, boolean> = {",
+    ]
+
+    for member in LossWeight:
+        flag = "true" if member.supports_flow_matching() else "false"
+        lines.append(f"  {_js_key(member.value)}: {flag},")
+
+    lines.append("};")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def generate_optimizer_info_ts(enums: list[tuple[str, type]]) -> str:
+    from modules.util.enum.Optimizer import Optimizer
+
+    # optimizer_util has a circular import; extract defaults from source via AST
+    global _incomplete_generation
+    try:
+        OPTIMIZER_DEFAULT_PARAMETERS = _extract_optimizer_defaults()
+    except Exception as e:
+        print(f"  WARNING: Could not extract OPTIMIZER_DEFAULT_PARAMETERS ({e})")
+        print("  Optimizer defaults will be empty.")
+        print("  Run from the OneTrainer venv for complete output: python -m web.scripts.generate_types")
+        OPTIMIZER_DEFAULT_PARAMETERS = {}
+        _incomplete_generation = True
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when backend optimizer definitions change.",
+        "",
+        'import type { Optimizer } from "./enums";',
+        "",
+    ]
+
+    adaptive = [opt for opt in Optimizer if opt.is_adaptive]
+    schedule_free = [opt for opt in Optimizer if opt.is_schedule_free]
+    fused_back_pass = [opt for opt in Optimizer if opt.supports_fused_back_pass()]
+
+    def opt_array(name: str, description: str, opts: list) -> None:
+        lines.append(f"/** {description} */")
+        quoted = [_ts_string(opt.value) for opt in opts]
+        prefix = f"export const {name}: Optimizer[] = "
+        block = _emit_array(quoted, prefix)
+        if len(block) == 1:
+            lines.append(f"{block[0]};")
+        else:
+            block[-1] = f"{block[-1]};"
+            lines.extend(block)
+        lines.append("")
+
+    opt_array("ADAPTIVE_OPTIMIZERS", "Optimizers with adaptive learning rates.", adaptive)
+    opt_array("SCHEDULE_FREE_OPTIMIZERS", "Schedule-free optimizers.", schedule_free)
+    opt_array("FUSED_BACK_PASS_OPTIMIZERS", "Optimizers that support fused backward pass.", fused_back_pass)
+
+    # Prettier reformats a Record<K, { ... multi-line inline object ... }> into this 5-line
+    # wrapper form, so emit that shape directly.
+    lines.append("/** Per-optimizer boolean property flags. */")
+    lines.append("export const OPTIMIZER_FLAGS: Record<")
+    lines.append("  Optimizer,")
+    lines.append("  {")
+    lines.append("    isAdaptive: boolean;")
+    lines.append("    isScheduleFree: boolean;")
+    lines.append("    supportsFusedBackPass: boolean;")
+    lines.append("  }")
+    lines.append("> = {")
+    for opt in Optimizer:
+        a = "true" if opt.is_adaptive else "false"
+        sf = "true" if opt.is_schedule_free else "false"
+        fb = "true" if opt.supports_fused_back_pass() else "false"
+        lines.append(f"  {_js_key(opt.value)}: {{ isAdaptive: {a}, isScheduleFree: {sf}, supportsFusedBackPass: {fb} }},")
+    lines.append("};")
+    lines.append("")
+
+    def serialize_value(v: Any) -> str:
+        if v is None:
+            return "null"
+        elif isinstance(v, bool):
+            return "true" if v else "false"
+        elif isinstance(v, (int, float)):
+            if v == float("inf"):
+                return "Infinity"
+            elif v == float("-inf"):
+                return "-Infinity"
+            return _ts_number(v)
+        elif isinstance(v, str):
+            return _ts_string(v)
+        elif isinstance(v, dict):
+            if not v:
+                return "{}"
+            pairs = ", ".join(f"{_js_key(str(k))}: {serialize_value(vv)}" for k, vv in v.items())
+            return f"{{ {pairs} }}"
+        elif isinstance(v, list):
+            if not v:
+                return "[]"
+            items = ", ".join(serialize_value(item) for item in v)
+            return f"[{items}]"
+        elif isinstance(v, Enum):
+            return _ts_string(str(v))
+        else:
+            return _ts_string(str(v))
+
+    lines.append("/** Default parameter values per optimizer (from optimizer_util.py). */")
+    lines.append("export const OPTIMIZER_DEFAULTS: Record<Optimizer, Record<string, unknown>> = {")
+    for opt in Optimizer:
+        defaults = OPTIMIZER_DEFAULT_PARAMETERS.get(opt, {})
+        if not defaults:
+            lines.append(f"  {_js_key(opt.value)}: {{}},")
+            continue
+        lines.append(f"  {_js_key(opt.value)}: {{")
+        for key, val in defaults.items():
+            lines.extend(_emit_entry(key, serialize_value(val), indent="    "))
+        lines.append("  },")
+    lines.append("};")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def _safe_literal_eval(node: ast.AST) -> Any:
+    """Like ast.literal_eval but additionally supports float('inf'), float('-inf'), and float('nan').
+
+    Plain ast.literal_eval rejects Call nodes, so any default like
+    `"growth_rate": float('inf')` causes silent fallback to {} during extraction.
+    """
+    if isinstance(node, ast.Constant):
+        return node.value
+    if isinstance(node, ast.Tuple):
+        return tuple(_safe_literal_eval(e) for e in node.elts)
+    if isinstance(node, ast.List):
+        return [_safe_literal_eval(e) for e in node.elts]
+    if isinstance(node, ast.Set):
+        return {_safe_literal_eval(e) for e in node.elts}
+    if isinstance(node, ast.Dict):
+        if len(node.keys) != len(node.values):
+            raise ValueError("malformed dict literal")
+        return {_safe_literal_eval(k): _safe_literal_eval(v) for k, v in zip(node.keys, node.values, strict=True)}
+    if isinstance(node, ast.UnaryOp) and isinstance(node.op, (ast.UAdd, ast.USub)):
+        operand = _safe_literal_eval(node.operand)
+        return +operand if isinstance(node.op, ast.UAdd) else -operand
+    if (
+        isinstance(node, ast.Call)
+        and isinstance(node.func, ast.Name)
+        and node.func.id == "float"
+        and len(node.args) == 1
+        and not node.keywords
+    ):
+        arg = _safe_literal_eval(node.args[0])
+        if isinstance(arg, str):
+            return float(arg)
+        raise ValueError(f"unsupported float() argument: {arg!r}")
+    raise ValueError(f"unsupported AST node: {ast.dump(node)}")
+
+
+def _extract_dict_from_source(source: str, variable_name: str) -> dict:
+    try:
+        tree = ast.parse(source)
+        for node in ast.walk(tree):
+            if isinstance(node, ast.Assign):
+                for target in node.targets:
+                    if isinstance(target, ast.Name) and target.id == variable_name:
+                        return _safe_literal_eval(node.value)
+        return {}
+    except (SyntaxError, ValueError) as e:
+        print(f"  WARNING: Could not parse {variable_name}: {e}")
+        return {}
+
+
+def _extract_optimizer_defaults() -> dict:
+    """AST-based extraction to avoid circular import in optimizer_util."""
+    from modules.util.enum.Optimizer import Optimizer
+
+    source_path = os.path.join(PROJECT_ROOT, "modules", "util", "optimizer_util.py")
+    with open(source_path, "r", encoding="utf-8") as f:
+        source = f.read()
+
+    try:
+        tree = ast.parse(source)
+    except SyntaxError as e:
+        print(f"  WARNING: Could not parse optimizer_util.py: {e}")
+        return {}
+
+    for node in ast.walk(tree):
+        if isinstance(node, ast.Assign):
+            for target in node.targets:
+                if isinstance(target, ast.Name) and target.id == "OPTIMIZER_DEFAULT_PARAMETERS":
+                    if not isinstance(node.value, ast.Dict):
+                        continue
+                    result = {}
+                    for key_node, val_node in zip(node.value.keys, node.value.values, strict=False):
+                        if isinstance(key_node, ast.Attribute) and isinstance(key_node.value, ast.Name):
+                            if key_node.value.id == "Optimizer":
+                                try:
+                                    opt_member = Optimizer[key_node.attr]
+                                except KeyError:
+                                    continue
+                                try:
+                                    val = _safe_literal_eval(val_node)
+                                except (ValueError, SyntaxError) as e:
+                                    print(f"  WARNING: Could not extract defaults for Optimizer.{key_node.attr}: {e}")
+                                    val = {}
+                                result[opt_member] = val
+                    return result
+
+    print("  WARNING: Could not find OPTIMIZER_DEFAULT_PARAMETERS in optimizer_util.py")
+    return {}
+
+
+def generate_optimizer_defaults_json(enums: list[tuple[str, type]]) -> str:
+    from modules.util.enum.Optimizer import Optimizer
+
+    global _incomplete_generation
+    try:
+        OPTIMIZER_DEFAULT_PARAMETERS = _extract_optimizer_defaults()
+    except Exception as e:
+        print(f"  WARNING: Could not extract OPTIMIZER_DEFAULT_PARAMETERS ({e})")
+        OPTIMIZER_DEFAULT_PARAMETERS = {}
+        _incomplete_generation = True
+
+    def clean_value(v: Any) -> Any:
+        if v is None:
+            return None
+        elif isinstance(v, bool):
+            return v
+        elif isinstance(v, (int, float)):
+            if v == float("inf"):
+                return "Infinity"
+            elif v == float("-inf"):
+                return "-Infinity"
+            return v
+        elif isinstance(v, str):
+            return v
+        elif isinstance(v, dict):
+            return {str(k): clean_value(vv) for k, vv in v.items()}
+        elif isinstance(v, list):
+            return [clean_value(item) for item in v]
+        elif isinstance(v, Enum):
+            return str(v)
+        else:
+            return str(v)
+
+    result: dict[str, dict] = {}
+    for opt in Optimizer:
+        defaults = OPTIMIZER_DEFAULT_PARAMETERS.get(opt, {})
+        result[str(opt)] = {str(k): clean_value(v) for k, v in defaults.items()}
+
+    return json.dumps(result, indent=2)
+
+
+def _extract_key_detail_map() -> dict:
+    """AST-based extraction to avoid importing tkinter-dependent UI module."""
+    source_path = os.path.join(PROJECT_ROOT, "modules", "ui", "OptimizerParamsWindow.py")
+    with open(source_path, "r", encoding="utf-8") as f:
+        source = f.read()
+
+    return _extract_dict_from_source(source, "KEY_DETAIL_MAP")
+
+
+def generate_optimizer_key_details_json() -> str:
+    key_detail_map = _extract_key_detail_map()
+    return json.dumps(key_detail_map, indent=2)
+
+
+def generate_optimizer_key_details_ts() -> str:
+    key_detail_map = _extract_key_detail_map()
+
+    # Derive the type union from actual values so new types (e.g. enum-like
+    # 'CenteredWDMode') don't silently violate the type contract.
+    type_values = sorted({str(detail["type"]) for detail in key_detail_map.values()})
+    type_union = " | ".join(f'"{t}"' for t in type_values)
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Source: modules/ui/OptimizerParamsWindow.py KEY_DETAIL_MAP",
+        "// Do not edit manually.",
+        "",
+        "export interface OptimizerKeyDetail {",
+        "  title: string;",
+        "  tooltip: string;",
+        f"  type: {type_union};",
+        "}",
+        "",
+        "export const OPTIMIZER_KEY_DETAILS: Record<string, OptimizerKeyDetail> = {",
+    ]
+
+    for key in sorted(key_detail_map.keys()):
+        detail = key_detail_map[key]
+        title = _ts_string(detail["title"])
+        tooltip = _ts_string(detail["tooltip"])
+        detail_type = _ts_string(detail["type"])
+        inline = f"{{ title: {title}, tooltip: {tooltip}, type: {detail_type} }}"
+        single = f"  {_js_key(key)}: {inline},"
+        if len(single) <= _PRETTIER_WIDTH:
+            lines.append(single)
+        else:
+            lines.append(f"  {_js_key(key)}: {{")
+            lines.append(f"    title: {title},")
+            lines.extend(_emit_entry("tooltip", tooltip, indent="    "))
+            lines.append(f"    type: {detail_type},")
+            lines.append("  },")
+
+    lines.append("};")
+    lines.append("")
+    return "\n".join(lines)
+
+
+_ACRONYMS = {
+    "SDXL", "VAE", "LORA", "GAN", "FP16", "FP32", "BF16", "NF4",
+    "CPU", "GPU", "TPU", "EMA", "LR", "GGUF", "BNBFP4", "BNBNF4",
+    "RGB", "RGBA", "HDR", "SRT", "JSON", "CSV", "MP3", "MP4", "FLAC",
+    "WAV", "OGG", "AVI", "MKV", "WEBM", "GIF", "PNG", "JPG", "JPEG",
+    "WEBP", "BMP", "TIFF",
+}
+
+_SPECIAL_LABELS = {
+    "ADAMW": "AdamW",
+    "LORA": "LoRA",
+    "ADAFACTOR": "Adafactor",
+}
+
+_VERSION_SUFFIXES = {"15": "1.5", "20": "2.0", "21": "2.1", "30": "3.0", "35": "3.5"}
+
+
+def _auto_label(value: str) -> str:
+    if value in _SPECIAL_LABELS:
+        return _SPECIAL_LABELS[value]
+
+    parts = value.split("_")
+    result = []
+    for part in parts:
+        if part in _ACRONYMS:
+            result.append(part)
+        elif part in _VERSION_SUFFIXES:
+            result.append(_VERSION_SUFFIXES[part])
+        elif part.isdigit():
+            result.append(part)
+        else:
+            result.append(part.capitalize())
+    return " ".join(result)
+
+
+def _auto_tooltip(field_path: str) -> str:
+    readable = field_path.replace(".", " ").replace("_", " ")
+    return readable[:1].upper() + readable[1:] if readable else ""
+
+
+def generate_enum_labels_ts(enums: list[tuple[str, type]]) -> str:
+    from web.scripts.ui_metadata import ENUM_DISPLAY_LABELS
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Update labels in web/scripts/ui_metadata.py.",
+        "",
+    ]
+
+    flat_labels: dict[str, str] = {}
+    for enum_name, enum_cls in enums:
+        overrides = ENUM_DISPLAY_LABELS.get(enum_name, {})
+        for member in enum_cls:
+            flat_labels[member.value] = overrides.get(member.value, _auto_label(member.value))
+
+    lines.append("const labels: Record<string, string> = {")
+    for value in sorted(flat_labels.keys()):
+        lines.extend(_emit_entry(value, _ts_string(flat_labels[value])))
+    lines.append("};")
+    lines.append("")
+
+    lines.append("function formatFallback(value: string): string {")
+    lines.append("  return value")
+    lines.append('    .replace(/_/g, " ")')
+    lines.append("    .replace(")
+    lines.append("      /\\b([A-Za-z])([A-Za-z]*)\\b/g,")
+    lines.append(
+        "      (_match, first: string, rest: string) => first.toUpperCase() + rest.toLowerCase(),"
+    )
+    lines.append("    );")
+    lines.append("}")
+    lines.append("")
+
+    lines.append("/**")
+    lines.append(" * Returns a human-friendly display label for any enum value string.")
+    lines.append(" * Looks up the value in a curated map. Falls back to title-casing.")
+    lines.append(" */")
+    lines.append("export function enumLabel(value: string): string {")
+    lines.append("  return labels[value] ?? formatFallback(value);")
+    lines.append("}")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def generate_data_type_subsets_ts() -> str:
+    from web.scripts.ui_metadata import DTYPE_SUBSETS
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Update subsets in web/scripts/ui_metadata.py.",
+        "",
+        'import type { DataType } from "./enums";',
+        "",
+        "export interface DTypeOption {",
+        "  label: string;",
+        "  value: DataType;",
+        "}",
+        "",
+    ]
+
+    lines.append("export const DTYPE_SUBSETS: Record<string, DTypeOption[]> = {")
+    for subset_name, options in DTYPE_SUBSETS.items():
+        lines.append(f"  {_js_key(subset_name)}: [")
+        for label, value in options:
+            lines.append(f"    {{ label: {json.dumps(label)}, value: {json.dumps(value)} }},")
+        lines.append("  ],")
+    lines.append("};")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+def generate_tooltips_ts(configs: list[tuple[str, type]]) -> str:
+    from web.scripts.ui_metadata import FIELD_TOOLTIPS, WIDE_TOOLTIPS
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Update tooltips in web/scripts/ui_metadata.py.",
+        "",
+    ]
+
+    all_tooltips: dict[str, str] = {}
+    all_tooltips.update(FIELD_TOOLTIPS)
+
+    for _class_name, cls in configs:
+        try:
+            inst = cls.default_values()
+            for field_name in inst.to_dict():
+                if field_name.startswith("__"):
+                    continue
+                if field_name not in all_tooltips:
+                    auto = _auto_tooltip(field_name)
+                    if auto:
+                        all_tooltips[field_name] = auto
+        except Exception:
+            continue
+
+    lines.append("/** Tooltip text for config fields, keyed by dot-notation field path. */")
+    lines.append("export const FIELD_TOOLTIPS: Record<string, string> = {")
+    for key in sorted(all_tooltips.keys()):
+        tooltip = all_tooltips[key]
+        lines.extend(_emit_entry(key, _ts_string(tooltip)))
+    lines.append("};")
+    lines.append("")
+
+    lines.append("/** Field keys that require wide tooltip display. */")
+    lines.append("export const WIDE_TOOLTIP_KEYS = new Set<string>([")
+    lines.extend(f"  {json.dumps(key)}," for key in sorted(WIDE_TOOLTIPS))
+    lines.append("]);")
+    lines.append("")
+
+    lines.append("/** Get tooltip text for a config field key. Returns undefined if not found. */")
+    lines.append("export function getTooltip(fieldKey: string): string | undefined {")
+    lines.append("  return FIELD_TOOLTIPS[fieldKey];")
+    lines.append("}")
+    lines.append("")
+
+    return "\n".join(lines)
+
+
+# --- Dropdown sources ---------------------------------------------------------
+# Any `<Select>` whose options are not covered by the enum / dtypeSubset / layer-
+# preset pipelines is sourced here: CTk `components.options_kv(...)` calls for
+# Convert & Concept modals (authoritative Python source), plus curated tool-modal
+# lists from `ui_metadata.TOOL_DROPDOWN_OPTIONS`. The generator AST-parses the CTk
+# calls, resolves `Enum.MEMBER` references via the runtime enum registry, and
+# emits plain `{ label, value }[]` arrays.
+
+
+def _resolve_ast_value_as_str(node: ast.AST, enum_lookup: dict[str, type]) -> str | None:
+    """Resolve an AST expression to its string value.
+
+    Handles two shapes used by CTk `options_kv` calls:
+    - `ast.Constant` string literals → the literal value.
+    - `ast.Attribute` of the form `EnumClass.MEMBER` → the member's `.value`.
+    """
+    if isinstance(node, ast.Constant) and isinstance(node.value, str):
+        return node.value
+    if isinstance(node, ast.Attribute) and isinstance(node.value, ast.Name):
+        cls = enum_lookup.get(node.value.id)
+        if cls is None:
+            return None
+        member = getattr(cls, node.attr, None)
+        if member is None:
+            return None
+        val = getattr(member, "value", None)
+        return val if isinstance(val, str) else None
+    return None
+
+
+def _extract_options_kv_calls(
+    filepath: str, enum_lookup: dict[str, type]
+) -> dict[str, list[tuple[str, str]]]:
+    """AST-parse a CTk UI file for `options_kv(..., [(label, value), ...], state, "field")` calls.
+
+    Returns `{field_name: [(label, value), ...]}`. Tuples whose label isn't a string
+    literal or whose value can't be resolved are skipped.
+    """
+    with open(filepath, encoding="utf-8") as f:
+        tree = ast.parse(f.read(), filename=filepath)
+
+    results: dict[str, list[tuple[str, str]]] = {}
+    for node in ast.walk(tree):
+        if not isinstance(node, ast.Call):
+            continue
+        func = node.func
+        func_name = (
+            func.attr if isinstance(func, ast.Attribute)
+            else func.id if isinstance(func, ast.Name)
+            else None
+        )
+        if func_name != "options_kv":
+            continue
+        # components.options_kv(master, row, col, list, state, field_name, ...)
+        if len(node.args) < 6:
+            continue
+        options_node, field_node = node.args[3], node.args[5]
+        if not isinstance(options_node, ast.List):
+            continue
+        if not (isinstance(field_node, ast.Constant) and isinstance(field_node.value, str)):
+            continue
+
+        pairs: list[tuple[str, str]] = []
+        for item in options_node.elts:
+            if not (isinstance(item, ast.Tuple) and len(item.elts) == 2):
+                continue
+            label_node, value_node = item.elts
+            if not (isinstance(label_node, ast.Constant) and isinstance(label_node.value, str)):
+                continue
+            value = _resolve_ast_value_as_str(value_node, enum_lookup)
+            if value is None:
+                continue
+            pairs.append((label_node.value, value))
+
+        if pairs:
+            results[field_node.value] = pairs
+
+    return results
+
+
+def _emit_kv_array(name: str, pairs: list[tuple[str, str]]) -> list[str]:
+    """Emit `export const NAME: DropdownOption[] = [...];` with Prettier-safe wrapping."""
+    lines = [f"export const {name}: DropdownOption[] = ["]
+    for label, value in pairs:
+        lines.append(f"  {{ label: {_ts_string(label)}, value: {_ts_string(value)} }},")
+    lines.append("];")
+    return lines
+
+
+def generate_dropdown_sources_ts() -> str:
+    """Emit `dropdownSources.ts` — every non-schema dropdown option list.
+
+    Sources:
+    - `modules/ui/ConvertModelUI.py`: Convert-model modal dropdowns (CTk `options_kv`).
+    - `modules/ui/ConceptWindow.py`: Concept modal dropdowns (CTk `options_kv`).
+    - `web/scripts/ui_metadata.TOOL_DROPDOWN_OPTIONS`: Caption/Mask tool modals
+      (web-specific; backend VALID_*_MODES are unordered `set`s, so ordering is
+      curated here rather than AST-parsed).
+    """
+    global _incomplete_generation
+
+    from web.scripts.ui_metadata import TOOL_DROPDOWN_OPTIONS
+
+    enum_lookup = dict(collect_enums())
+
+    convert_path = os.path.join(PROJECT_ROOT, "modules", "ui", "ConvertModelUI.py")
+    concept_path = os.path.join(PROJECT_ROOT, "modules", "ui", "ConceptWindow.py")
+
+    try:
+        convert_calls = _extract_options_kv_calls(convert_path, enum_lookup)
+    except OSError as e:
+        print(f"  WARNING: Could not read {convert_path} ({e})")
+        convert_calls = {}
+        _incomplete_generation = True
+
+    try:
+        concept_calls = _extract_options_kv_calls(concept_path, enum_lookup)
+    except OSError as e:
+        print(f"  WARNING: Could not read {concept_path} ({e})")
+        concept_calls = {}
+        _incomplete_generation = True
+
+    # Field -> exported constant name. Order here controls file layout.
+    convert_map = [
+        ("model_type", "CONVERT_MODEL_TYPES"),
+        ("training_method", "CONVERT_TRAINING_METHODS"),
+        ("output_dtype", "CONVERT_OUTPUT_DTYPES"),
+        ("output_model_format", "CONVERT_OUTPUT_FORMATS"),
+    ]
+    concept_map = [
+        ("prompt_source", "PROMPT_SOURCES"),
+        ("tag_dropout_mode", "TAG_DROPOUT_MODES"),
+        ("tag_dropout_special_tags_mode", "TAG_DROPOUT_SPECIAL_TAGS_MODES"),
+    ]
+
+    lines = [
+        "// Auto-generated by web/scripts/generate_types.py",
+        "// Do not edit manually. Regenerate when CTk options_kv calls or",
+        "// ui_metadata.TOOL_DROPDOWN_OPTIONS change.",
+        "",
+        "/** Label/value pair consumed by `<Select options={...}>` (matches SelectKVOption). */",
+        "export interface DropdownOption {",
+        "  label: string;",
+        "  value: string;",
+        "}",
+        "",
+        "// --- Convert Model modal (modules/ui/ConvertModelUI.py) ----------------------",
+        "",
+    ]
+
+    for field, const_name in convert_map:
+        pairs = convert_calls.get(field)
+        if not pairs:
+            print(f"  WARNING: No options_kv for {field!r} in ConvertModelUI.py")
+            _incomplete_generation = True
+            pairs = []
+        lines.extend(_emit_kv_array(const_name, pairs))
+        lines.append("")
+
+    lines.append("// --- Concept modal (modules/ui/ConceptWindow.py) -----------------------------")
+    lines.append("")
+
+    for field, const_name in concept_map:
+        pairs = concept_calls.get(field)
+        if not pairs:
+            print(f"  WARNING: No options_kv for {field!r} in ConceptWindow.py")
+            _incomplete_generation = True
+            pairs = []
+        lines.extend(_emit_kv_array(const_name, pairs))
+        lines.append("")
+
+    lines.append("// --- Caption / Mask tool modals (web/scripts/ui_metadata.py) -----------------")
+    lines.append("")
+
+    for const_name in ("CAPTION_MODELS", "CAPTION_MODES", "MASK_MODELS", "MASK_MODES"):
+        pairs = TOOL_DROPDOWN_OPTIONS.get(const_name, [])
+        if not pairs:
+            print(f"  WARNING: TOOL_DROPDOWN_OPTIONS missing {const_name!r}")
+            _incomplete_generation = True
+        lines.extend(_emit_kv_array(const_name, pairs))
+        lines.append("")
+
+    return "\n".join(lines)
+
+
+def write_file(filename: str, content: str) -> str:
+    filepath = os.path.join(OUTPUT_DIR, filename)
+    with open(filepath, "w", encoding="utf-8", newline="\n") as f:
+        f.write(content)
+    return filepath
+
+
+def main():
+    os.makedirs(OUTPUT_DIR, exist_ok=True)
+
+    print("Collecting enums...")
+    enums = collect_enums()
+    print(f"  Found {len(enums)} enum types")
+
+    print("Collecting config classes...")
+    configs = collect_configs()
+    print(f"  Found {len(configs)} config classes")
+
+    enum_names = {name for name, _ in enums}
+
+    print("Generating enums.ts...")
+    print(f"  Wrote {write_file('enums.ts', generate_enums_ts(enums))}")
+
+    print("Generating config.ts...")
+    print(f"  Wrote {write_file('config.ts', generate_config_ts(configs, enum_names))}")
+
+    print("Generating metadata.ts...")
+    print(f"  Wrote {write_file('metadata.ts', generate_metadata_ts(configs, enum_names))}")
+
+    new_generators = [
+        ("modelTypeInfo.ts", lambda: generate_model_type_info_ts(enums)),
+        ("optimizerInfo.ts", lambda: generate_optimizer_info_ts(enums)),
+        ("optimizerKeyDetails.ts", lambda: generate_optimizer_key_details_ts()),
+        ("enumLabels.ts", lambda: generate_enum_labels_ts(enums)),
+        ("dataTypeSubsets.ts", lambda: generate_data_type_subsets_ts()),
+        ("tooltips.ts", lambda: generate_tooltips_ts(configs)),
+        ("layerPresets.ts", lambda: generate_layer_presets_ts()),
+        ("lossWeightInfo.ts", lambda: generate_loss_weight_info_ts()),
+        ("dropdownSources.ts", lambda: generate_dropdown_sources_ts()),
+    ]
+
+    global _incomplete_generation
+    for filename, generator in new_generators:
+        print(f"Generating {filename}...")
+        try:
+            print(f"  Wrote {write_file(filename, generator())}")
+        except Exception as e:
+            print(f"  ERROR generating {filename}: {e}")
+            import traceback
+            traceback.print_exc()
+            _incomplete_generation = True
+
+    backend_generated_dir = os.path.join(PROJECT_ROOT, "web", "backend", "generated")
+    os.makedirs(backend_generated_dir, exist_ok=True)
+
+    print("Generating optimizer_defaults.json (backend)...")
+    try:
+        json_content = generate_optimizer_defaults_json(enums)
+        json_path = os.path.join(backend_generated_dir, "optimizer_defaults.json")
+        with open(json_path, "w", encoding="utf-8", newline="\n") as f:
+            f.write(json_content)
+        print(f"  Wrote {json_path}")
+    except Exception as e:
+        print(f"  ERROR generating optimizer_defaults.json: {e}")
+        import traceback
+        traceback.print_exc()
+        _incomplete_generation = True
+
+    print("Generating optimizer_key_details.json (backend)...")
+    try:
+        json_content = generate_optimizer_key_details_json()
+        json_path = os.path.join(backend_generated_dir, "optimizer_key_details.json")
+        with open(json_path, "w", encoding="utf-8", newline="\n") as f:
+            f.write(json_content)
+        print(f"  Wrote {json_path}")
+    except Exception as e:
+        print(f"  ERROR generating optimizer_key_details.json: {e}")
+        import traceback
+        traceback.print_exc()
+        _incomplete_generation = True
+
+    total_enum_values = sum(len(list(cls)) for _, cls in enums)
+    total_config_fields = 0
+    for _class_name, cls in configs:
+        instance = cls.default_values()
+        total_config_fields += len(instance.types)
+
+    print("\nSummary:")
+    print(f"  {len(enums)} enum types with {total_enum_values} total values")
+    print(f"  {len(configs)} config interfaces with {total_config_fields} total fields")
+    print("  12 generated TypeScript files")
+
+    if _incomplete_generation:
+        print("\nWARNING: Some files were not generated successfully.")
+        print("Check the errors above and fix the underlying issues.")
+        print("Re-run from the OneTrainer venv: python -m web.scripts.generate_types")
+        sys.exit(1)
+    else:
+        print("Done!")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/web/scripts/generate_ui_schema.py b/web/scripts/generate_ui_schema.py
new file mode 100644
index 000000000..e5fad932c
--- /dev/null
+++ b/web/scripts/generate_ui_schema.py
@@ -0,0 +1,642 @@
+from __future__ import annotations
+
+import json
+import logging
+import re
+import sys
+from pathlib import Path
+
+PROJECT_ROOT = Path(__file__).resolve().parent.parent.parent
+if str(PROJECT_ROOT) not in sys.path:
+    sys.path.insert(0, str(PROJECT_ROOT))
+
+from web.scripts import ui_metadata
+from web.scripts.ui_parser import ADV_COMMAND_MAP, CtkTabParser, ParsedField, ParsedTab
+
+logger = logging.getLogger(__name__)
+
+
+def extract_predicates() -> dict[str, list[str]]:
+    try:
+        from modules.util.enum.ModelType import ModelType
+    except ImportError:
+        logger.warning("Could not import ModelType; predicates will be empty")
+        return {}
+
+    predicates: dict[str, list[str]] = {}
+    for attr_name in ModelType.__dict__:
+        if attr_name.startswith(("is_", "has_")):
+            method = getattr(ModelType, attr_name, None)
+            if callable(method):
+                group = []
+                for member in ModelType:
+                    try:
+                        if method(member):
+                            group.append(member.name)
+                    except Exception:  # noqa: PERF203
+                        pass
+                if group:
+                    predicates[attr_name] = group
+    return predicates
+
+
+def extract_enums() -> dict[str, dict]:
+    import importlib
+
+    enum_dir = PROJECT_ROOT / "modules" / "util" / "enum"
+    enums: dict[str, dict] = {}
+    labels_map = getattr(ui_metadata, "ENUM_DISPLAY_LABELS", {})
+
+    for py_file in sorted(enum_dir.glob("*.py")):
+        if py_file.name.startswith("_"):
+            continue
+        module_name = f"modules.util.enum.{py_file.stem}"
+        try:
+            mod = importlib.import_module(module_name)
+        except Exception:
+            continue
+
+        for attr_name in dir(mod):
+            obj = getattr(mod, attr_name)
+            if isinstance(obj, type) and issubclass(obj, __import__("enum").Enum) and obj.__module__ == mod.__name__:
+                values = [m.name for m in obj]
+                curated = labels_map.get(attr_name, {})
+                labels = {}
+                for v in values:
+                    if v in curated:
+                        labels[v] = curated[v]
+                    else:
+                        labels[v] = _auto_label(v)
+                enums[attr_name] = {"values": values, "labels": labels}
+
+    return enums
+
+
+def extract_training_methods_by_model() -> dict[str, list[str]]:
+    try:
+        from modules.util.enum.ModelType import ModelType
+        from modules.util.enum.TrainingMethod import TrainingMethod
+    except ImportError:
+        return {}
+
+    result: dict[str, list[str]] = {}
+    for mt in ModelType:
+        result[mt.name] = [tm.name for tm in TrainingMethod]
+    return result
+
+
+def extract_dtype_subsets() -> dict[str, list[dict[str, str]]]:
+    raw = getattr(ui_metadata, "DTYPE_SUBSETS", {})
+    result: dict[str, list[dict[str, str]]] = {}
+    for key, entries in raw.items():
+        result[key] = [{"label": label, "value": value} for label, value in entries]
+    return result
+
+
+def _sanitize_default(value):
+    # Browsers' JSON.parse rejects raw Infinity / -Infinity / NaN tokens,
+    # so encode them as strings the same way the backend JSON does.
+    if isinstance(value, float):
+        if value == float("inf"):
+            return "Infinity"
+        if value == float("-inf"):
+            return "-Infinity"
+        if value != value:  # NaN
+            return "NaN"
+        return value
+    if hasattr(value, "name"):
+        return value.name
+    return value
+
+
+def extract_optimizer_defaults() -> dict[str, dict]:
+    try:
+        from web.scripts.generate_types import _extract_optimizer_defaults
+
+        raw = _extract_optimizer_defaults()
+        return {
+            (k.name if hasattr(k, "name") else str(k)): {pk: _sanitize_default(pv) for pk, pv in v.items()}
+            for k, v in raw.items()
+        }
+    except Exception:
+        json_path = PROJECT_ROOT / "web" / "backend" / "generated" / "optimizer_defaults.json"
+        if json_path.exists():
+            with open(json_path) as f:
+                return json.load(f)
+        logger.warning("Could not extract optimizer defaults")
+        return {}
+
+
+def extract_optimizer_key_details() -> dict[str, dict]:
+    try:
+        from web.scripts.generate_types import _extract_key_detail_map
+
+        return _extract_key_detail_map()
+    except Exception:
+        json_path = PROJECT_ROOT / "web" / "backend" / "generated" / "optimizer_key_details.json"
+        if json_path.exists():
+            with open(json_path) as f:
+                return json.load(f)
+        logger.warning("Could not extract optimizer key details")
+        return {}
+
+
+def parse_all_tabs() -> dict[str, ParsedTab]:
+    parser = CtkTabParser()
+    ui_dir = PROJECT_ROOT / "modules" / "ui"
+    tabs: dict[str, ParsedTab] = {}
+
+    custom_tab_ids = {"concept", "concepts", "sampling", "additionalembeddings"}
+
+    for pattern in ["*Tab.py"]:
+        for filepath in sorted(ui_dir.glob(pattern)):
+            if filepath.name.startswith("_"):
+                continue
+            result = parser.parse_file(filepath)
+            if result and result.tab_id not in custom_tab_ids:
+                tabs[result.tab_id] = result
+                logger.info("Parsed %s -> tab '%s' (%d sections, %d variants)",
+                           filepath.name, result.tab_id,
+                           len(result.sections), len(result.variants))
+
+    train_ui_path = ui_dir / "TrainUI.py"
+    if train_ui_path.exists():
+        inline_parser = CtkTabParser()
+        inline_parser.parse_file(train_ui_path)
+
+        inline_tab_methods = {
+            "general": "create_general_tab",
+            "data": "create_data_tab",
+            "backup": "create_backup_tab",
+            "embedding": "embedding_tab",
+        }
+
+        for tab_id, method_name in inline_tab_methods.items():
+            result = inline_parser.parse_method_as_tab(method_name, tab_id)
+            if not result or not result.sections:
+                continue
+
+            existing = tabs.get(tab_id)
+            if existing and existing.sections:
+                merged_fields = 0
+                for sec_id, sec in result.sections.items():
+                    if sec_id in existing.sections:
+                        existing_keys = {f.key for f in existing.sections[sec_id].fields}
+                        new_fields = [f for f in sec.fields if f.key not in existing_keys]
+                        existing.sections[sec_id].fields = new_fields + existing.sections[sec_id].fields
+                        merged_fields += len(new_fields)
+                    else:
+                        existing.sections[sec_id] = sec
+                        merged_fields += len(sec.fields)
+                logger.info("Merged TrainUI.%s() into tab '%s' (+%d fields)",
+                           method_name, tab_id, merged_fields)
+            else:
+                tabs[result.tab_id] = result
+                logger.info("Parsed TrainUI.%s() -> tab '%s' (%d sections)",
+                           method_name, result.tab_id, len(result.sections))
+
+    return tabs
+
+
+def field_to_dict(field: ParsedField) -> dict:
+    d: dict = {
+        "key": field.key,
+        "label": field.label or _auto_label(field.key),
+        "type": field.widget_type,
+    }
+
+    if field.tooltip:
+        d["tooltip"] = field.tooltip
+    if field.widget_type == "entry" and field.key:
+        d["inputType"] = "text"
+    if field.nullable:
+        d["nullable"] = True
+    if field.enum_ref:
+        d["enumRef"] = field.enum_ref
+    if field.kv_options:
+        d["options"] = field.kv_options
+    if field.dtype_subset:
+        d["dtypeSubset"] = field.dtype_subset
+    if field.adv_command:
+        modal = ADV_COMMAND_MAP.get(field.adv_command)
+        if modal:
+            d["modal"] = modal
+    if field.widget_type == "time-entry":
+        d["valuePath"] = field.key
+        d["unitPath"] = field.unit_var or f"{field.key}_unit"
+    if field.widget_type == "layer-filter":
+        d["filterPath"] = field.key
+        d["presetPath"] = field.preset_var or f"{field.key}_preset"
+        d["regexPath"] = field.regex_var or f"{field.key}_regex"
+
+    return d
+
+
+def _derive_sec_ref(method_name: str) -> str:
+    """Strips prefixes/suffixes and handles name-mangled forms."""
+    sec_ref = method_name
+    for prefix in ("__create_", "_create_"):
+        if sec_ref.startswith(prefix):
+            sec_ref = sec_ref[len(prefix):]
+    for suffix in ("_frame", "_components"):
+        if sec_ref.endswith(suffix):
+            sec_ref = sec_ref[:-len(suffix)]
+            break
+    mangled_prefix_match = re.match(r"_\w+(__create_)", sec_ref)
+    if mangled_prefix_match:
+        sec_ref = sec_ref[mangled_prefix_match.end(1) - len("__create_"):]
+        for prefix in ("__create_", "_create_"):
+            if sec_ref.startswith(prefix):
+                sec_ref = sec_ref[len(prefix):]
+        for suffix in ("_frame", "_components"):
+            if sec_ref.endswith(suffix):
+                sec_ref = sec_ref[:-len(suffix)]
+                break
+    return sec_ref
+
+
+def _expand_field_template(field_dict: dict, i: int) -> dict:
+    """Resolve ``{...}`` placeholders: suffix for config keys, number for labels."""
+    suffix = f"_{i}" if i > 1 else ""
+    number = str(i)
+    out = dict(field_dict)
+
+    for path_key in ("key", "valuePath", "unitPath", "filterPath", "presetPath", "regexPath"):
+        if path_key in out and "{...}" in out[path_key]:
+            out[path_key] = out[path_key].replace("{...}", suffix)
+
+    for text_key in ("label", "tooltip"):
+        if text_key in out and isinstance(out[text_key], str) and "{...}" in out[text_key]:
+            out[text_key] = out[text_key].replace("{...}", number)
+
+    return out
+
+
+def _expand_section_template(
+    base_section_dict: dict,
+    i: int,
+    base_section_id: str,
+) -> tuple[str, dict]:
+    core_id = base_section_id
+    qualifier = ""
+    dunder_pos = base_section_id.find("__")
+    if dunder_pos >= 0:
+        core_id = base_section_id[:dunder_pos]
+        qualifier = base_section_id[dunder_pos:]
+
+    base_name = core_id[:-2] if core_id.endswith("_n") else core_id
+    expanded_id = f"{base_name}_{i}{qualifier}"
+    expanded = dict(base_section_dict)
+    expanded["id"] = expanded_id
+    expanded["label"] = f"Text Encoder {i}"
+    expanded["fields"] = [_expand_field_template(f, i) for f in base_section_dict["fields"]]
+    return expanded_id, expanded
+
+
+def _expand_templated_sections(
+    section_defs: dict[str, dict],
+    variants: list,
+    tab_variants: list,
+):
+    template_ids: set[str] = set()
+    for sec_id, sec_dict in section_defs.items():
+        for field in sec_dict.get("fields", []):
+            if "{...}" in field.get("key", ""):
+                template_ids.add(sec_id)
+                break
+
+    if not template_ids:
+        return
+
+    for var_idx, parsed_variant in enumerate(tab_variants):
+        if var_idx >= len(variants):
+            break
+        var_dict = variants[var_idx]
+
+        fc_by_sec: list[tuple[str, str, object]] = []
+        for fc in parsed_variant.frame_calls:
+            sec_ref = fc.resolved_section_id or _derive_sec_ref(fc.method_name)
+            fc_by_sec.append((fc.column_var, sec_ref, fc))
+
+        col_map: dict[str, list[str]] = {}
+        for col_var, sec_ref, fc in fc_by_sec:
+            if col_var not in col_map:
+                col_map[col_var] = []
+
+            if sec_ref in template_ids and "i" in fc.kwargs:
+                i_val = fc.kwargs["i"]
+                core_ref = sec_ref
+                qualifier = ""
+                dunder_pos = sec_ref.find("__")
+                if dunder_pos >= 0:
+                    core_ref = sec_ref[:dunder_pos]
+                    qualifier = sec_ref[dunder_pos:]
+                base_name = core_ref[:-2] if core_ref.endswith("_n") else core_ref
+                expanded_id = f"{base_name}_{i_val}{qualifier}"
+                if expanded_id not in section_defs:
+                    _, expanded_dict = _expand_section_template(
+                        section_defs[sec_ref], i_val, sec_ref
+                    )
+                    expanded_dict["id"] = expanded_id
+                    section_defs[expanded_id] = expanded_dict
+                col_map[col_var].append(expanded_id)
+            else:
+                col_map[col_var].append(sec_ref)
+
+        sorted_cols = sorted(col_map.keys())
+        var_dict["columns"] = [{"sections": col_map[c]} for c in sorted_cols]
+
+    for tmpl_id in template_ids:
+        still_referenced = False
+        for var_dict in variants:
+            for col in var_dict.get("columns", []):
+                if tmpl_id in col.get("sections", []):
+                    still_referenced = True
+                    break
+            if still_referenced:
+                break
+        if not still_referenced and tmpl_id in section_defs:
+            del section_defs[tmpl_id]
+
+
+def tab_to_dict(tab: ParsedTab) -> dict:
+    d: dict = {
+        "id": tab.tab_id,
+        "label": TAB_LABEL_OVERRIDES.get(tab.tab_id, _auto_label(tab.tab_id)),
+        "renderer": "schema",
+    }
+
+    if tab.variants:
+        d["layout"] = tab.layout
+
+        section_defs: dict[str, dict] = {}
+        for section_id, section in tab.sections.items():
+            section_defs[section_id] = {
+                "id": section.id,
+                "label": section.label,
+                "fields": [field_to_dict(f) for f in section.fields],
+            }
+
+        variants = []
+        for variant in tab.variants:
+            columns: dict[str, list[str]] = {}
+            for fc in variant.frame_calls:
+                col = fc.column_var
+                if col not in columns:
+                    columns[col] = []
+                sec_ref = fc.resolved_section_id or _derive_sec_ref(fc.method_name)
+                columns[col].append(sec_ref)
+
+            sorted_cols = sorted(columns.keys())
+            col_defs = [{"sections": columns[c]} for c in sorted_cols]
+
+            variants.append({
+                "when": {"predicate": variant.predicate},
+                "columns": col_defs,
+            })
+
+        _expand_templated_sections(section_defs, variants, tab.variants)
+
+        d["sectionDefs"] = section_defs
+        d["variants"] = variants
+    else:
+        d["layout"] = "single-column"
+        d["sections"] = [
+            {
+                "id": section.id,
+                "label": section.label,
+                "fields": [field_to_dict(f) for f in section.fields],
+            }
+            for section in tab.sections.values()
+        ]
+
+    return d
+
+
+def enrich_with_tooltips(schema: dict):
+    tooltips = getattr(ui_metadata, "FIELD_TOOLTIPS", {})
+    if not tooltips:
+        return
+
+    for tab in schema.get("tabs", []):
+        for section in _iter_all_sections(tab):
+            for field in section.get("fields", []):
+                key = field.get("key", "")
+                if key in tooltips and not field.get("tooltip"):
+                    field["tooltip"] = tooltips[key]
+
+
+def enrich_field_visibility(schema: dict):
+    FIELD_VISIBILITY_OVERRIDES: dict[tuple[str, str], dict] = {
+        ("loss", "vb_loss_strength"): {"predicate": "is_pixart"},
+        ("base2", "frames"): {
+            "or": [
+                {"predicate": "is_hunyuan_video"},
+                {"predicate": "is_hi_dream"},
+            ]
+        },
+        ("noise", "generalized_offset_noise"): {
+            "or": [
+                {"predicate": "is_stable_diffusion"},
+                {"predicate": "is_stable_diffusion_xl"},
+            ]
+        },
+        ("noise", "dynamic_timestep_shifting"): {
+            "or": [
+                {"predicate": "is_flux_1"},
+                {"predicate": "is_flux_2"},
+                {"predicate": "is_qwen"},
+                {"predicate": "is_z_image"},
+            ]
+        },
+        ("loss", "loss_weight_strength"): {"not": {"predicate": "is_flow_matching"}},
+    }
+
+    for tab in schema.get("tabs", []):
+        for section in _iter_all_sections(tab):
+            sec_id = section.get("id", "")
+            for field in section.get("fields", []):
+                key = field.get("key", "")
+                vis = FIELD_VISIBILITY_OVERRIDES.get((sec_id, key))
+                if vis is not None:
+                    field["visibility"] = vis
+
+
+def enrich_field_types(schema: dict):
+    try:
+        from modules.util.config.TrainConfig import TrainConfig
+        config = TrainConfig.default_values()
+        type_map = {}
+        _collect_types(config, "", type_map)
+    except Exception:
+        return
+
+    for tab in schema.get("tabs", []):
+        for section in _iter_all_sections(tab):
+            for field in section.get("fields", []):
+                key = field.get("key", "")
+                if field.get("type") == "entry" and key in type_map:
+                    if type_map[key] in (int, float):
+                        field["inputType"] = "number"
+
+
+def _collect_types(config, prefix: str, type_map: dict):
+    if not hasattr(config, "types"):
+        return
+    for name, typ in config.types.items():
+        path = f"{prefix}{name}" if not prefix else f"{prefix}.{name}"
+        type_map[path] = typ
+        val = getattr(config, name, None)
+        if val is not None and hasattr(val, "types"):
+            _collect_types(val, f"{path}.", type_map)
+
+
+def _iter_all_sections(tab: dict):
+    if "sections" in tab:
+        yield from tab["sections"]
+    if "sectionDefs" in tab:
+        yield from tab["sectionDefs"].values()
+
+
+TAB_LABEL_OVERRIDES = {
+    "additionalembeddings": "Additional Embeddings",
+    "lora": "LoRA",
+}
+
+CUSTOM_TABS = [
+    {"id": "concepts", "label": "Concepts", "renderer": "custom"},
+    {"id": "sampling", "label": "Sampling", "renderer": "custom"},
+    {"id": "additionalembeddings", "label": "Additional Embeddings", "renderer": "custom"},
+    {"id": "performance", "label": "Performance", "renderer": "custom"},
+    {"id": "run", "label": "Run", "renderer": "custom"},
+    {"id": "tools", "label": "Tools", "renderer": "custom"},
+    {"id": "help", "label": "Help", "renderer": "custom"},
+]
+
+TAB_ORDER = [
+    "general", "model", "data", "concepts", "training", "sampling",
+    "backup", "tools", "lora", "embedding",
+    "additionalembeddings", "cloud", "performance", "run", "help",
+]
+
+
+def build_modals() -> dict:
+    return {
+        "optimizer-params": {
+            "title": "Optimizer Parameters",
+            "renderer": "optimizer-params",
+        },
+        "scheduler-params": {
+            "title": "Scheduler Parameters",
+            "renderer": "scheduler-params",
+        },
+        "timestep-dist": {
+            "title": "Timestep Distribution",
+            "renderer": "timestep-dist",
+        },
+        "offloading": {
+            "title": "Offloading & Checkpointing",
+            "renderer": "offloading",
+        },
+    }
+
+
+def generate_schema() -> dict:
+    parsed_tabs = parse_all_tabs()
+
+    tab_dicts: dict[str, dict] = {}
+    for tab_id, parsed in parsed_tabs.items():
+        tab_dicts[tab_id] = tab_to_dict(parsed)
+
+    for custom in CUSTOM_TABS:
+        tab_dicts[custom["id"]] = custom
+
+    if "lora" in tab_dicts:
+        tab_dicts["lora"]["visibility"] = {"field": "training_method", "eq": "LORA"}
+        for section in tab_dicts["lora"].get("sections", []):
+            sid = section["id"]
+            if sid == "lora_lora":
+                section["visibility"] = {"field": "peft_type", "eq": "LORA"}
+            elif sid == "lora_lora_or_loha":
+                section["visibility"] = {"field": "peft_type", "in": ["LORA", "LOHA"]}
+            elif sid == "lora_oft_2":
+                section["visibility"] = {"field": "peft_type", "eq": "OFT_2"}
+    if "embedding" in tab_dicts:
+        tab_dicts["embedding"]["visibility"] = {"field": "training_method", "eq": "EMBEDDING"}
+    if "additionalembeddings" in tab_dicts:
+        tab_dicts["additionalembeddings"]["visibility"] = {"not": {"predicate": "is_flow_matching"}}
+
+    ordered_tabs = [tab_dicts[tab_id] for tab_id in TAB_ORDER if tab_id in tab_dicts]
+    ordered_tabs.extend(tab for tab_id, tab in tab_dicts.items() if tab_id not in TAB_ORDER)
+
+    predicates = extract_predicates()
+    enums = extract_enums()
+    dtype_subsets = extract_dtype_subsets()
+
+    schema = {
+        "$version": 1,
+        "predicates": predicates,
+        "enums": enums,
+        "dtypeSubsets": dtype_subsets,
+        "tabs": ordered_tabs,
+        "modals": build_modals(),
+        "optimizerDefaults": extract_optimizer_defaults(),
+        "optimizerKeyDetails": extract_optimizer_key_details(),
+        "trainingMethodsByModel": extract_training_methods_by_model(),
+    }
+
+    enrich_with_tooltips(schema)
+    enrich_field_types(schema)
+    enrich_field_visibility(schema)
+
+    return schema
+
+
+def write_schema(schema: dict):
+    gui_dir = PROJECT_ROOT / "web" / "gui"
+
+    public_path = gui_dir / "public" / "ui-schema.json"
+    public_path.parent.mkdir(parents=True, exist_ok=True)
+    with open(public_path, "w", encoding="utf-8") as f:
+        json.dump(schema, f, indent=2, ensure_ascii=False)
+    logger.info("Wrote %s", public_path)
+
+    dist_path = gui_dir / "dist" / "renderer" / "ui-schema.json"
+    if dist_path.parent.exists():
+        with open(dist_path, "w", encoding="utf-8") as f:
+            json.dump(schema, f, indent=2, ensure_ascii=False)
+        logger.info("Wrote %s", dist_path)
+
+
+def _auto_label(name: str) -> str:
+    name = name.split(".")[-1]
+    words = name.replace("_", " ").split()
+    return " ".join(w.capitalize() for w in words)
+
+
+def main():
+    logging.basicConfig(level=logging.INFO, format="%(levelname)s: %(message)s")
+
+    validate = "--validate" in sys.argv
+
+    schema = generate_schema()
+
+    if validate:
+        tab_count = len(schema["tabs"])
+        field_count = sum(
+            len(f.get("fields", []))
+            for tab in schema["tabs"]
+            for section in _iter_all_sections(tab)
+            for f in [section]
+        )
+        print(f"Schema: {tab_count} tabs, {field_count} fields")
+        print(f"Predicates: {len(schema['predicates'])}")
+        print(f"Enums: {len(schema['enums'])}")
+        return
+
+    write_schema(schema)
+    print("UI schema generated successfully.")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/web/scripts/run_eslint.py b/web/scripts/run_eslint.py
new file mode 100644
index 000000000..155a10b8c
--- /dev/null
+++ b/web/scripts/run_eslint.py
@@ -0,0 +1,25 @@
+from __future__ import annotations
+
+import shutil
+import subprocess
+import sys
+from pathlib import Path
+
+
+def main() -> int:
+    gui_dir = Path(__file__).resolve().parents[1] / "gui"
+    npx = shutil.which("npx") or shutil.which("npx.cmd")
+    if npx is None:
+        print("error: npx not found on PATH", file=sys.stderr)
+        return 1
+
+    result = subprocess.run(
+        [npx, "eslint", "--fix", "--max-warnings", "0", "src/"],
+        cwd=gui_dir,
+        shell=False,
+    )
+    return result.returncode
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/web/scripts/run_generate_types.js b/web/scripts/run_generate_types.js
new file mode 100644
index 000000000..70f8f4b20
--- /dev/null
+++ b/web/scripts/run_generate_types.js
@@ -0,0 +1,50 @@
+/**
+ * Finds the venv Python and runs generate_types.py.
+ * Used by npm scripts and the Electron build pipeline.
+ */
+const { execFileSync } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+const projectRoot = path.resolve(__dirname, "..", "..");
+const isWindows = process.platform === "win32";
+
+const venvPaths = isWindows
+  ? [
+      path.join(projectRoot, "venv", "Scripts", "python.exe"),
+      path.join(projectRoot, ".venv", "Scripts", "python.exe"),
+    ]
+  : [
+      path.join(projectRoot, "venv", "bin", "python"),
+      path.join(projectRoot, ".venv", "bin", "python"),
+    ];
+
+const python =
+  venvPaths.find((p) => fs.existsSync(p)) ||
+  (isWindows ? "python" : "python3");
+
+console.log(`[generate-types] Using Python: ${python}`);
+console.log(`[generate-types] Project root: ${projectRoot}`);
+
+const runModule = (mod, label) => {
+  execFileSync(python, ["-m", mod], {
+    cwd: projectRoot,
+    stdio: "inherit",
+    env: { ...process.env, PYTHONUNBUFFERED: "1" },
+    // On Windows, shell: true is required for PATH resolution of Python
+    // shims (.bat/.cmd, e.g. pyenv, conda). The arguments here are
+    // hardcoded literals, not user input, so shell interpretation is not
+    // a risk in this specific case. On non-Windows platforms, shell is
+    // false, eliminating shell interpretation entirely.
+    shell: isWindows,
+  });
+  console.log(`[${label}] Complete.`);
+};
+
+try {
+  runModule("web.scripts.generate_types", "generate-types");
+  runModule("web.scripts.generate_ui_schema", "generate-ui-schema");
+} catch (err) {
+  console.error("[generate-types] Failed:", err.message);
+  process.exit(1);
+}
diff --git a/web/scripts/ui_metadata.py b/web/scripts/ui_metadata.py
new file mode 100644
index 000000000..37d4d453e
--- /dev/null
+++ b/web/scripts/ui_metadata.py
@@ -0,0 +1,1017 @@
+ENUM_DISPLAY_LABELS: dict[str, dict[str, str]] = {
+    "ModelType": {
+        "STABLE_DIFFUSION_15": "SD1.5",
+        "STABLE_DIFFUSION_15_INPAINTING": "SD1.5 Inpainting",
+        "STABLE_DIFFUSION_20": "SD2.0",
+        "STABLE_DIFFUSION_20_BASE": "SD2.0 Base",
+        "STABLE_DIFFUSION_20_INPAINTING": "SD2.0 Inpainting",
+        "STABLE_DIFFUSION_20_DEPTH": "SD2.0 Depth",
+        "STABLE_DIFFUSION_21": "SD2.1",
+        "STABLE_DIFFUSION_21_BASE": "SD2.1 Base",
+        "STABLE_DIFFUSION_3": "SD3",
+        "STABLE_DIFFUSION_35": "SD3.5",
+        "STABLE_DIFFUSION_XL_10_BASE": "SDXL",
+        "STABLE_DIFFUSION_XL_10_BASE_INPAINTING": "SDXL Inpainting",
+        "WUERSTCHEN_2": "Wuerstchen v2",
+        "STABLE_CASCADE_1": "Stable Cascade",
+        "PIXART_ALPHA": "PixArt Alpha",
+        "PIXART_SIGMA": "PixArt Sigma",
+        "FLUX_DEV_1": "Flux Dev.1",
+        "FLUX_FILL_DEV_1": "Flux Fill Dev",
+        "FLUX_2": "Flux 2 [Dev, Klein]",
+        "SANA": "Sana",
+        "HUNYUAN_VIDEO": "Hunyuan Video",
+        "HI_DREAM_FULL": "HiDream Full",
+        "CHROMA_1": "Chroma1",
+        "QWEN": "QwenImage",
+        "Z_IMAGE": "Z-Image",
+    },
+    "TrainingMethod": {
+        "FINE_TUNE": "Fine-Tune",
+        "LORA": "LoRA",
+        "EMBEDDING": "Embedding",
+        "FINE_TUNE_VAE": "Fine-Tune VAE",
+    },
+    "DataType": {
+        "NONE": "None",
+        "FLOAT_8": "Float 8",
+        "FLOAT_16": "Float 16",
+        "FLOAT_32": "Float 32",
+        "BFLOAT_16": "BFloat 16",
+        "TFLOAT_32": "TFloat 32",
+        "INT_8": "Int 8",
+        "NFLOAT_4": "NFloat 4",
+        "FLOAT_W8A8": "Float W8A8",
+        "INT_W8A8": "Int W8A8",
+        "GGUF": "GGUF",
+        "GGUF_A8_FLOAT": "GGUF A8 Float",
+        "GGUF_A8_INT": "GGUF A8 Int",
+    },
+    "PeftType": {
+        "LORA": "LoRA",
+        "LOHA": "LoHa",
+        "OFT_2": "OFT v2",
+    },
+    "EMAMode": {
+        "OFF": "Off",
+        "GPU": "GPU",
+        "CPU": "CPU",
+    },
+    "GradientCheckpointingMethod": {
+        "OFF": "Off",
+        "ON": "On",
+        "CPU_OFFLOADED": "CPU Offloaded",
+    },
+    "GradientReducePrecision": {
+        "WEIGHT_DTYPE": "Weight Dtype",
+        "WEIGHT_DTYPE_STOCHASTIC": "Weight Dtype Stochastic",
+        "FLOAT_32": "Float 32",
+        "FLOAT_32_STOCHASTIC": "Float 32 Stochastic",
+    },
+    "BalancingStrategy": {
+        "REPEATS": "Repeats",
+        "SAMPLES": "Samples",
+    },
+    "ConceptType": {
+        "STANDARD": "Standard",
+        "VALIDATION": "Validation",
+        "PRIOR_PREDICTION": "Prior Prediction",
+    },
+    "ConfigPart": {
+        "NONE": "None",
+        "SETTINGS": "Settings",
+        "ALL": "All",
+    },
+    "CloudAction": {
+        "NONE": "None",
+        "STOP": "Stop",
+        "DELETE": "Delete",
+    },
+    "CloudFileSync": {
+        "FABRIC_SFTP": "Fabric SFTP",
+        "NATIVE_SCP": "Native SCP",
+    },
+    "CloudType": {
+        "RUNPOD": "RunPod",
+        "LINUX": "Linux",
+    },
+    "FileType": {
+        "IMAGE": "Image",
+        "VIDEO": "Video",
+        "AUDIO": "Audio",
+    },
+    "GenerateCaptionsModel": {
+        "BLIP": "BLIP",
+        "BLIP2": "BLIP2",
+        "WD14_VIT_2": "WD14 ViT 2",
+    },
+    "GenerateMasksModel": {
+        "CLIPSEG": "CLIPSeg",
+        "REMBG": "RemBG",
+        "REMBG_HUMAN": "RemBG Human",
+        "COLOR": "Color",
+    },
+    "ImageFormat": {
+        "PNG": "PNG",
+        "JPG": "JPG",
+    },
+    "AudioFormat": {
+        "MP3": "MP3",
+        "MP4": "MP4",
+    },
+    "VideoFormat": {
+        "PNG_IMAGE_SEQUENCE": "PNG Image Sequence",
+        "JPG_IMAGE_SEQUENCE": "JPG Image Sequence",
+    },
+    "LearningRateScaler": {
+        "NONE": "None",
+        "BATCH": "Batch",
+        "GLOBAL_BATCH": "Global Batch",
+        "GRADIENT_ACCUMULATION": "Gradient Accumulation",
+        "BOTH": "Both",
+        "GLOBAL_BOTH": "Global Both",
+    },
+    "LossScaler": {
+        "NONE": "None",
+        "BATCH": "Batch",
+        "GLOBAL_BATCH": "Global Batch",
+        "GRADIENT_ACCUMULATION": "Gradient Accumulation",
+        "BOTH": "Both",
+        "GLOBAL_BOTH": "Global Both",
+    },
+    "LearningRateScheduler": {
+        "CONSTANT": "Constant",
+        "LINEAR": "Linear",
+        "COSINE": "Cosine",
+        "COSINE_WITH_RESTARTS": "Cosine with Restarts",
+        "COSINE_WITH_HARD_RESTARTS": "Cosine with Hard Restarts",
+        "REX": "Rex",
+        "ADAFACTOR": "Adafactor",
+        "CUSTOM": "Custom",
+    },
+    "LossWeight": {
+        "NONE": "None",
+        "P2": "P2",
+        "MIN_SNR_GAMMA": "Min SNR Gamma",
+        "DEBIASED_ESTIMATION": "Debiased Estimation",
+        "SIGMA": "Sigma",
+    },
+    "ModelFormat": {
+        "DIFFUSERS": "Diffusers",
+        "CKPT": "Checkpoint",
+        "SAFETENSORS": "Safetensors",
+        "LEGACY_SAFETENSORS": "Legacy Safetensors",
+        "COMFY_LORA": "Comfy LoRA",
+        "INTERNAL": "Internal",
+    },
+    "NoiseScheduler": {
+        "DDIM": "DDIM",
+        "EULER": "Euler",
+        "EULER_A": "Euler A",
+        "DPMPP": "DPM++",
+        "DPMPP_SDE": "DPM++ SDE",
+        "UNIPC": "UniPC",
+        "EULER_KARRAS": "Euler Karras",
+        "DPMPP_KARRAS": "DPM++ Karras",
+        "DPMPP_SDE_KARRAS": "DPM++ SDE Karras",
+        "UNIPC_KARRAS": "UniPC Karras",
+    },
+    "Optimizer": {
+        "ADAGRAD": "Adagrad",
+        "ADAGRAD_8BIT": "Adagrad 8-bit",
+        "ADAM": "Adam",
+        "ADAM_8BIT": "Adam 8-bit",
+        "ADAMW": "AdamW",
+        "ADAMW_8BIT": "AdamW 8-bit",
+        "ADAMW_ADV": "AdamW Adv",
+        "AdEMAMix": "AdEMAMix",
+        "AdEMAMix_8BIT": "AdEMAMix 8-bit",
+        "SIMPLIFIED_AdEMAMix": "Simplified AdEMAMix",
+        "ADOPT": "ADOPT",
+        "ADOPT_ADV": "ADOPT Adv",
+        "LAMB": "LAMB",
+        "LAMB_8BIT": "LAMB 8-bit",
+        "LARS": "LARS",
+        "LARS_8BIT": "LARS 8-bit",
+        "LION": "LION",
+        "LION_8BIT": "LION 8-bit",
+        "LION_ADV": "LION Adv",
+        "RMSPROP": "RMSProp",
+        "RMSPROP_8BIT": "RMSProp 8-bit",
+        "SGD": "SGD",
+        "SGD_8BIT": "SGD 8-bit",
+        "SIGNSGD_ADV": "SignSGD Adv",
+        "SCHEDULE_FREE_ADAMW": "Schedule-Free AdamW",
+        "SCHEDULE_FREE_SGD": "Schedule-Free SGD",
+        "DADAPT_ADA_GRAD": "D-Adapt AdaGrad",
+        "DADAPT_ADAM": "D-Adapt Adam",
+        "DADAPT_ADAN": "D-Adapt Adan",
+        "DADAPT_LION": "D-Adapt LION",
+        "DADAPT_SGD": "D-Adapt SGD",
+        "PRODIGY": "Prodigy",
+        "PRODIGY_PLUS_SCHEDULE_FREE": "Prodigy+ Schedule-Free",
+        "PRODIGY_ADV": "Prodigy Adv",
+        "LION_PRODIGY_ADV": "LION Prodigy Adv",
+        "ADAFACTOR": "Adafactor",
+        "CAME": "CAME",
+        "CAME_8BIT": "CAME 8-bit",
+        "MUON": "Muon",
+        "MUON_ADV": "Muon Adv",
+        "ADAMUON_ADV": "AdaMuon Adv",
+        "ADABELIEF": "AdaBelief",
+        "TIGER": "TIGER",
+        "AIDA": "AIDA",
+        "YOGI": "Yogi",
+    },
+    "TimeUnit": {
+        "EPOCH": "Epoch",
+        "STEP": "Step",
+        "SECOND": "Second",
+        "MINUTE": "Minute",
+        "HOUR": "Hour",
+        "NEVER": "Never",
+        "ALWAYS": "Always",
+    },
+    "TimestepDistribution": {
+        "UNIFORM": "Uniform",
+        "SIGMOID": "Sigmoid",
+        "LOGIT_NORMAL": "Logit Normal",
+        "HEAVY_TAIL": "Heavy Tail",
+        "COS_MAP": "Cos Map",
+        "INVERTED_PARABOLA": "Inverted Parabola",
+    },
+}
+
+# Tool-modal dropdown options that don't map 1:1 to a Python enum.
+# The caption/mask tool modals show backend-supported models/modes; the web
+# frontend extends the CTk list (OpenAI/Gemini/YOLO), and backend mode keys are
+# declared as unordered sets (`VALID_CAPTION_MODES`, `VALID_MASK_MODES`) in
+# `web/backend/services/tool_service.py`, so a curated ordering lives here.
+# Entries are (display_label, backend_value) pairs; order determines UI order.
+TOOL_DROPDOWN_OPTIONS: dict[str, list[tuple[str, str]]] = {
+    "CAPTION_MODELS": [
+        ("Blip", "Blip"),
+        ("Blip2", "Blip2"),
+        ("WD14 VIT v2", "WD14 VIT v2"),
+        ("OpenAI Compatible", "OpenAI Compatible"),
+        ("Gemini API", "Gemini API"),
+    ],
+    "CAPTION_MODES": [
+        ("Replace all captions", "replace"),
+        ("Create if absent", "fill"),
+        ("Add as new line", "add"),
+    ],
+    "MASK_MODELS": [
+        ("ClipSeg", "ClipSeg"),
+        ("Rembg", "Rembg"),
+        ("Rembg-Human", "Rembg-Human"),
+        ("Hex Color", "Hex Color"),
+        ("YOLO", "YOLO"),
+    ],
+    "MASK_MODES": [
+        ("Replace all masks", "replace"),
+        ("Create if absent", "fill"),
+        ("Add to existing", "add"),
+        ("Subtract from existing", "subtract"),
+        ("Blend with existing", "blend"),
+    ],
+}
+
+DTYPE_SUBSETS: dict[str, list[tuple[str, str]]] = {
+    "base": [
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+        ("float16", "FLOAT_16"),
+        ("float8 (W8)", "FLOAT_8"),
+        ("nfloat4", "NFLOAT_4"),
+    ],
+    "with_a8": [
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+        ("float16", "FLOAT_16"),
+        ("float8 (W8)", "FLOAT_8"),
+        ("nfloat4", "NFLOAT_4"),
+        ("float W8A8", "FLOAT_W8A8"),
+        ("int W8A8", "INT_W8A8"),
+    ],
+    "with_gguf_a8": [
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+        ("float16", "FLOAT_16"),
+        ("float8 (W8)", "FLOAT_8"),
+        ("nfloat4", "NFLOAT_4"),
+        ("float W8A8", "FLOAT_W8A8"),
+        ("int W8A8", "INT_W8A8"),
+        ("GGUF", "GGUF"),
+        ("GGUF A8 float", "GGUF_A8_FLOAT"),
+        ("GGUF A8 int", "GGUF_A8_INT"),
+    ],
+    "output": [
+        ("float16", "FLOAT_16"),
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+        ("float8", "FLOAT_8"),
+        ("nfloat4", "NFLOAT_4"),
+    ],
+    "train": [
+        ("float32", "FLOAT_32"),
+        ("float16", "FLOAT_16"),
+        ("bfloat16", "BFLOAT_16"),
+        ("tfloat32", "TFLOAT_32"),
+    ],
+    "fallback_train": [
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+    ],
+    "svd_quant": [
+        ("disabled", "NONE"),
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+    ],
+    "lora_weight": [
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+    ],
+    "embedding_weight": [
+        ("float32", "FLOAT_32"),
+        ("bfloat16", "BFLOAT_16"),
+    ],
+}
+
+FIELD_TOOLTIPS: dict[str, str] = {
+    "secrets.huggingface_token": (
+        "Enter your Hugging Face access token if you have used a protected"
+        " Hugging Face repository below.\nThis value is stored separately,"
+        " not saved to your configuration file."
+        " Go to https://huggingface.co/settings/tokens to create an access token."
+    ),
+    "base_model_name": "Filename, directory or Hugging Face repository of the base model",
+    "compile": (
+        "Uses torch.compile and Triton to significantly speed up training."
+        " Only applies to transformer/unet. Disable in case of compatibility issues."
+    ),
+
+    "unet.weight_dtype": "The unet weight data type",
+    "transformer.model_name": (
+        "Can be used to override the transformer in the base model."
+        " Safetensors and GGUF files are supported, local and on Huggingface."
+        " If a GGUF file is used, the DataType must also be set to GGUF"
+    ),
+    "transformer.weight_dtype": "The transformer weight data type",
+    "prior.model_name": "Filename, directory or Hugging Face repository of the prior model",
+    "prior.weight_dtype": "The prior weight data type",
+
+    "text_encoder.weight_dtype": "The text encoder weight data type",
+    "text_encoder_2.weight_dtype": "The text encoder 2 weight data type",
+    "text_encoder_3.weight_dtype": "The text encoder 3 weight data type",
+    "text_encoder_4.model_name": "Filename, directory or Hugging Face repository of the text encoder 4 model",
+    "text_encoder_4.weight_dtype": "The text encoder 4 weight data type",
+
+    "vae.model_name": (
+        "Directory or Hugging Face repository of a VAE model in diffusers format."
+        " Can be used to override the VAE included in the base model."
+        " Using a safetensor VAE file will cause an error that the model cannot be loaded."
+    ),
+    "vae.weight_dtype": "The vae weight data type",
+
+    "effnet_encoder.model_name": "Filename, directory or Hugging Face repository of the effnet encoder model",
+    "effnet_encoder.weight_dtype": "The effnet encoder weight data type",
+    "decoder.model_name": "Filename, directory or Hugging Face repository of the decoder model",
+    "decoder.weight_dtype": "The decoder weight data type",
+    "decoder_text_encoder.weight_dtype": "The decoder text encoder weight data type",
+    "decoder_vqgan.weight_dtype": "The decoder vqgan weight data type",
+
+    "quantization.layer_filter_preset": (
+        "Select a preset defining which layers to quantize."
+        " Quantization of certain layers can decrease model quality."
+        " Only applies to the transformer/unet"
+    ),
+    "quantization.layer_filter": (
+        "Comma-separated list of layers to quantize."
+        " Regular expressions (if toggled) are supported."
+        " Any model layer with a matching name will be quantized"
+    ),
+    "quantization.layer_filter_regex": (
+        "If enabled, layer filter patterns are interpreted as regular expressions."
+        " Otherwise, simple substring matching is used."
+    ),
+    "quantization.svd_dtype": "What datatype to use for SVDQuant weights decomposition.",
+    "quantization.svd_rank": "Rank for SVDQuant weights decomposition",
+
+    "output_model_destination": "Filename or directory where the output model is saved",
+    "output_dtype": "Precision to use when saving the output model",
+    "output_model_format": "Format to use when saving the output model",
+    "include_train_config": (
+        "Include the training configuration in the final model."
+        " Only supported for safetensors files."
+        " None: No config is included."
+        " Settings: All training settings are included."
+        " All: All settings, including the samples and concepts are included."
+    ),
+
+    "optimizer.optimizer": "The type of optimizer",
+    "learning_rate_scheduler": "Learning rate scheduler that automatically changes the learning rate during training",
+    "learning_rate": "The base learning rate",
+    "learning_rate_warmup_steps": (
+        "The number of steps it takes to gradually increase the learning rate from 0"
+        " to the specified learning rate. Values >1 are interpreted as a fixed number"
+        " of steps, values <=1 are interpreted as a percentage of the total training"
+        " steps (ex. 0.2 = 20% of the total step count)"
+    ),
+    "learning_rate_min_factor": (
+        "Unit = float. Method = percentage. For a factor of 0.1, the final LR will be"
+        " 10% of the initial LR. If the initial LR is 1e-4, the final LR will be 1e-5."
+    ),
+    "learning_rate_cycles": (
+        "The number of learning rate cycles."
+        " This is only applicable if the learning rate scheduler supports cycles"
+    ),
+    "epochs": "The number of epochs for a full training run",
+    "batch_size": (
+        "The batch size of one training step."
+        " If you use multiple GPUs, this is the batch size of each GPU (local batch size)."
+    ),
+    "gradient_accumulation_steps": (
+        "Number of accumulation steps."
+        " Increase this number to trade batch size for training speed"
+    ),
+    "learning_rate_scaler": (
+        "Selects the type of learning rate scaling to use during training."
+        " Functionally equated as: LR * SQRT(selection)"
+    ),
+    "clip_grad_norm": "Clips the gradient norm. Leave empty to disable gradient clipping.",
+
+    "ema": (
+        "EMA averages the training progress over many steps,"
+        " better preserving different concepts in big datasets"
+    ),
+    "ema_decay": (
+        "Decay parameter of the EMA model. Higher numbers will average more steps."
+        " For datasets of hundreds or thousands of images, set this to 0.9999."
+        " For smaller datasets, set it to 0.999 or even 0.998"
+    ),
+    "ema_update_step_interval": "Number of steps between EMA update steps",
+    "gradient_checkpointing": (
+        "Enables gradient checkpointing."
+        " This reduces memory usage, but increases training time"
+    ),
+    "layer_offload_fraction": (
+        "Enables offloading of individual layers during training to reduce VRAM usage."
+        " Increases training time and uses more RAM."
+        " Only available if checkpointing is set to CPU_OFFLOADED."
+        " values between 0 and 1, 0=disabled"
+    ),
+    "enable_async_offloading": (
+        "Enable asynchronous layer offloading to overlap GPU compute with CPU-GPU transfers."
+        " Can improve throughput when using layer offloading"
+    ),
+    "enable_activation_offloading": (
+        "Offload activations to CPU during the forward pass to reduce GPU memory usage."
+        " May slow training slightly due to CPU-GPU transfers"
+    ),
+    "train_dtype": (
+        "The mixed precision data type used for training."
+        " This can increase training speed, but reduces precision"
+    ),
+    "fallback_train_dtype": (
+        "The mixed precision data type used for training stages that don't support"
+        " float16 data types. This can increase training speed, but reduces precision"
+    ),
+    "enable_autocast_cache": (
+        "Enables the autocast cache."
+        " Disabling this reduces memory usage, but increases training time"
+    ),
+    "resolution": (
+        "The resolution used for training."
+        " Optionally specify multiple resolutions separated by a comma,"
+        " or a single exact resolution in the format <width>x<height>"
+    ),
+    "frames": "The number of frames used for training.",
+    "force_circular_padding": (
+        "Enables circular padding for all conv layers"
+        " to better train seamless images"
+    ),
+
+    "text_encoder.train": "Enables training the text encoder model",
+    "text_encoder.dropout_probability": "The Probability for dropping the text encoder conditioning",
+    "text_encoder.stop_training_after": "When to stop training the text encoder",
+    "text_encoder.learning_rate": "The learning rate of the text encoder. Overrides the base learning rate",
+    "text_encoder_layer_skip": "The number of additional clip layers to skip. 0 = the model default",
+    "text_encoder_sequence_length": "Number of tokens for captions",
+
+    "text_encoder.include": "Includes the text encoder in the training run",
+    "text_encoder.train_embedding": "Enables training embeddings for the text encoder model",
+    "text_encoder_2.include": "Includes text encoder 2 in the training run",
+    "text_encoder_2.train": "Enables training the text encoder 2 model",
+    "text_encoder_2.train_embedding": "Enables training embeddings for the text encoder 2 model",
+    "text_encoder_2.dropout_probability": "The Probability for dropping the text encoder 2 conditioning",
+    "text_encoder_2.stop_training_after": "When to stop training the text encoder 2",
+    "text_encoder_2.learning_rate": "The learning rate of the text encoder 2. Overrides the base learning rate",
+    "text_encoder_2_layer_skip": "The number of additional clip layers to skip. 0 = the model default",
+    "text_encoder_2_sequence_length": (
+        "Overrides the number of tokens used for captions."
+        " If empty, the model default is used, which is 512 on Flux."
+        " Comfy samples with 256 tokens though."
+        " 77 is the default only for backwards compatibility."
+    ),
+    "text_encoder_3.include": "Includes text encoder 3 in the training run",
+    "text_encoder_3.train": "Enables training the text encoder 3 model",
+    "text_encoder_3.train_embedding": "Enables training embeddings for the text encoder 3 model",
+    "text_encoder_3.dropout_probability": "The Probability for dropping the text encoder 3 conditioning",
+    "text_encoder_3.stop_training_after": "When to stop training the text encoder 3",
+    "text_encoder_3.learning_rate": "The learning rate of the text encoder 3. Overrides the base learning rate",
+    "text_encoder_3_layer_skip": "The number of additional clip layers to skip. 0 = the model default",
+    "text_encoder_4.include": "Includes text encoder 4 in the training run",
+    "text_encoder_4.train": "Enables training the text encoder 4 model",
+    "text_encoder_4.train_embedding": "Enables training embeddings for the text encoder 4 model",
+    "text_encoder_4.dropout_probability": "The Probability for dropping the text encoder 4 conditioning",
+    "text_encoder_4.stop_training_after": "When to stop training the text encoder 4",
+    "text_encoder_4.learning_rate": "The learning rate of the text encoder 4. Overrides the base learning rate",
+
+    "embedding_learning_rate": "The learning rate of embeddings. Overrides the base learning rate",
+    "preserve_embedding_norm": "Rescales each trained embedding to the median embedding norm",
+
+    "unet.train": "Enables training the UNet model",
+    "unet.stop_training_after": "When to stop training the UNet",
+    "unet.learning_rate": "The learning rate of the UNet. Overrides the base learning rate",
+    "rescale_noise_scheduler_to_zero_terminal_snr": (
+        "Rescales the noise scheduler to a zero terminal signal to noise ratio"
+        " and switches the model to a v-prediction target"
+    ),
+
+    "prior.train": "Enables training the Prior model",
+    "prior.stop_training_after": "When to stop training the Prior",
+    "prior.learning_rate": "The learning rate of the Prior. Overrides the base learning rate",
+
+    "transformer.train": "Enables training the Transformer model",
+    "transformer.stop_training_after": "When to stop training the Transformer",
+    "transformer.learning_rate": "The learning rate of the Transformer. Overrides the base learning rate",
+    "transformer.attention_mask": (
+        "Force enables passing of a text embedding attention mask to the transformer."
+        " This can improve training on shorter captions."
+    ),
+    "transformer.guidance_scale": (
+        "The guidance scale of guidance distilled models"
+        " passed to the transformer during training."
+    ),
+
+    "offset_noise_weight": "The weight of offset noise added to each training step",
+    "generalized_offset_noise": (
+        "Per-timestep 'brightness knob' instead of a fixed offset -"
+        " steadier training, better starts, and improved very dark/bright images."
+        " Compatible with V-pred and Eps-pred. Start with 0.02 and adjust as needed."
+    ),
+    "perturbation_noise_weight": "The weight of perturbation noise added to each training step",
+    "timestep_distribution": "Selects the function to sample timesteps during training",
+    "min_noising_strength": (
+        "Specifies the minimum noising strength used during training."
+        " This can help to improve composition, but prevents finer details from being trained"
+    ),
+    "max_noising_strength": (
+        "Specifies the maximum noising strength used during training."
+        " This can be useful to reduce overfitting, but also reduces the impact"
+        " of training samples on the overall image composition"
+    ),
+    "noising_weight": (
+        "Controls the weight parameter of the timestep distribution function."
+        " Use the preview to see more details."
+    ),
+    "noising_bias": (
+        "Controls the bias parameter of the timestep distribution function."
+        " Use the preview to see more details."
+    ),
+    "timestep_shift": "Shift the timestep distribution. Use the preview to see more details.",
+    "dynamic_timestep_shifting": (
+        "Dynamically shift the timestep distribution based on resolution."
+        " If enabled, the shifting parameters are taken from the model's scheduler"
+        " configuration and Timestep Shift is ignored."
+        " Note: For Z-Image and Flux2, the dynamic shifting parameters are likely"
+        " wrong and unknown. Use with care or set your own, fixed shift."
+    ),
+
+    "masked_training": (
+        "Masks the training samples to let the model focus on certain parts"
+        " of the image. When enabled, one mask image is loaded for each training sample."
+    ),
+    "unmasked_probability": (
+        "When masked training is enabled, specifies the number of"
+        " training steps done on unmasked samples"
+    ),
+    "unmasked_weight": (
+        "When masked training is enabled, specifies the loss weight"
+        " of areas outside the masked region"
+    ),
+    "normalize_masked_area_loss": (
+        "When masked training is enabled, normalizes the loss for each sample"
+        " based on the sizes of the masked region"
+    ),
+    "masked_prior_preservation_weight": (
+        "Preserves regions outside the mask using the original untrained model"
+        " output as a target. Only available for LoRA training."
+        " If enabled, use a low unmasked weight."
+    ),
+    "custom_conditioning_image": (
+        "When custom conditioning image is enabled, will use png postfix with"
+        " -condlabel instead of automatically generated."
+        " It's suitable for special scenarios, such as object removal,"
+        " allowing the model to learn a certain behavior concept"
+    ),
+
+    "mse_strength": "Mean Squared Error strength for custom loss settings. Strengths should generally sum to 1.",
+    "mae_strength": "Mean Absolute Error strength for custom loss settings. Strengths should generally sum to 1.",
+    "log_cosh_strength": (
+        "Log - Hyperbolic cosine Error strength for custom loss settings."
+        " Strengths should generally sum to 1."
+    ),
+    "huber_strength": (
+        "Huber loss strength for custom loss settings."
+        " Less sensitive to outliers than MSE. Strengths should generally sum to 1."
+    ),
+    "huber_delta": "Delta parameter for huber loss",
+    "vb_loss_strength": (
+        "Variational lower-bound strength for custom loss settings."
+        " Should be set to 1 for variational diffusion models"
+    ),
+    "loss_weight_fn": "Choice of loss weight function. Can help the model learn details more accurately.",
+    "loss_weight_strength": (
+        "Inverse strength of loss weighting."
+        " Range: 1-20, only applies to Min SNR and P2."
+    ),
+    "loss_scaler": (
+        "Selects the type of loss scaling to use during training."
+        " Functionally equated as: Loss * selection"
+    ),
+
+    "layer_filter_preset": (
+        "Select a preset defining which layers to train, or select 'Custom'"
+        " to define your own.\nA blank 'custom' field or 'Full' will train all layers."
+    ),
+    "layer_filter": (
+        "Comma-separated list of diffusion layers to train."
+        " Regular expressions (if toggled) are supported."
+        " Any model layer with a matching name will be trained"
+    ),
+    "layer_filter_regex": (
+        "If enabled, layer filter patterns are interpreted as regular expressions."
+        " Otherwise, simple substring matching is used."
+    ),
+
+    "peft_type": "The type of low-parameter finetuning method.",
+    "lora_model_name": "The base LoRA to train on. Leave empty to create a new LoRA",
+    "lora_rank": "The rank parameter used when creating a new LoRA",
+    "lora_alpha": "The alpha parameter used when creating a new LoRA",
+    "dropout_probability": (
+        "Dropout probability. This percentage of model nodes will be randomly"
+        " ignored at each training step. Helps with overfitting. 0 disables, 1 maximum."
+    ),
+    "lora_weight_dtype": (
+        "The LoRA weight data type used for training."
+        " This can reduce memory consumption, but reduces precision"
+    ),
+    "bundle_additional_embeddings": (
+        "Bundles any additional embeddings into the LoRA output file,"
+        " rather than as separate files"
+    ),
+    "lora_decompose": "Decompose LoRA Weights (aka, DoRA).",
+    "lora_decompose_norm_epsilon": (
+        "Add an epsilon to the norm division calculation in DoRA."
+        " Can aid in training stability, and also acts as regularization."
+    ),
+    "lora_decompose_output_axis": (
+        "Apply the weight decomposition on the output axis instead of the input axis."
+    ),
+    "oft_block_size": "The block size parameter used when creating a new OFT v2",
+    "oft_coft": (
+        "Use the constrained variant of OFT. This constrains the learned rotation"
+        " to stay very close to the identity matrix, limiting adaptation to only"
+        " small changes. This improves training stability, helps prevent overfitting"
+        " on small datasets, and better preserves the base model's original knowledge"
+        " but it may lack expressiveness for tasks requiring substantial adaptation."
+    ),
+    "coft_eps": "The control strength of COFT. Only has an effect if COFT is enabled.",
+    "oft_block_share": (
+        "Share the OFT parameters between blocks. A single rotation matrix is"
+        " shared across all blocks within a layer, drastically cutting the number"
+        " of trainable parameters and yielding very compact adapter files."
+    ),
+
+    "embedding.model_name": "The base embedding to train on. Leave empty to create a new embedding",
+    "embedding.placeholder": "The placeholder used when using the embedding in a prompt",
+    "embedding.token_count": (
+        "The token count used when creating a new embedding."
+        " Leave empty to auto detect from the initial embedding text."
+    ),
+    "embedding.initial_embedding_text": "The initial embedding text used when creating a new embedding",
+    "embedding_weight_dtype": (
+        "The Embedding weight data type used for training."
+        " This can reduce memory consumption, but reduces precision"
+    ),
+    "embedding.is_output_embedding": (
+        "Output embeddings are calculated at the output of the text encoder,"
+        " not the input. This can improve results for larger text encoders"
+        " and lower VRAM usage."
+    ),
+    "embedding.train": "Enable or disable training of the embedding",
+    "embedding.stop_training_after": "When to stop training the embedding",
+
+    "additional_embedding.model_name": "The base embedding to train on. Leave empty to create a new embedding",
+    "additional_embedding.placeholder": "The placeholder used when using the embedding in a prompt",
+    "additional_embedding.token_count": (
+        "The token count used when creating a new embedding."
+        " Leave empty to auto detect from the initial embedding text."
+    ),
+    "additional_embedding.is_output_embedding": (
+        "Output embeddings are calculated at the output of the text encoder,"
+        " not the input. This can improve results for larger text encoders"
+        " and lower VRAM usage."
+    ),
+    "additional_embedding.stop_training_after": "When to stop training the embedding",
+    "additional_embedding.initial_embedding_text": "The initial embedding text used when creating a new embedding",
+
+    "workspace_dir": "The directory where all files of this training run are saved",
+    "cache_dir": "The directory where cached data is saved",
+    "continue_last_backup": "Automatically continues training from the last backup saved in <workspace>/backup",
+    "only_cache": "Only populate the cache, without any training",
+
+    "debug_mode": "Save debug information during the training into the debug directory",
+    "debug_dir": "The directory where debug data is saved",
+
+    "tensorboard": "Starts the Tensorboard Web UI during training",
+    "tensorboard_always_on": (
+        "Keep Tensorboard accessible even when not training."
+        " Useful for monitoring completed training sessions."
+    ),
+    "tensorboard_expose": "Exposes Tensorboard Web UI to all network interfaces (makes it accessible from the network)",
+    "tensorboard_port": "Port to use for Tensorboard link",
+
+    "validation": "Enable validation steps and add new graph in tensorboard",
+    "validate_after": "The interval used when validate training",
+
+    "dataloader_threads": (
+        "Number of threads used for the data loader."
+        " Increase if your GPU has room during caching,"
+        " decrease if it's going out of memory during caching."
+    ),
+    "train_device": (
+        'The device used for training. Can be "cuda", "cuda:0", "cuda:1" etc.'
+        ' Default:"cuda". Must be "cuda" for multi-GPU training.'
+    ),
+    "temp_device": 'The device used to temporarily offload models while they are not used. Default:"cpu"',
+
+    "multi_gpu": "Enable multi-GPU training",
+    "device_indexes": (
+        "Multi-GPU: A comma-separated list of device indexes."
+        " If empty, all your GPUs are used."
+        ' With a list such as "0,1,3,4" you can omit a GPU,'
+        " for example an on-board graphics GPU."
+    ),
+    "gradient_reduce_precision": (
+        "WEIGHT_DTYPE: Reduce gradients between GPUs in your weight data type;"
+        " can be imprecise, but more efficient than float32\n"
+        "WEIGHT_DTYPE_STOCHASTIC: Sum up the gradients in your weight data type,"
+        " but average them in float32 and stochastically round"
+        " if your weight data type is bfloat16\n"
+        "FLOAT_32: Reduce gradients in float32\n"
+        "FLOAT_32_STOCHASTIC: Reduce gradients in float32;"
+        " use stochastic rounding to bfloat16 if your weight data type is bfloat16"
+    ),
+    "fused_gradient_reduce": (
+        "Multi-GPU: Gradient synchronisation during the backward pass."
+        " Can be more efficient, especially with Async Gradient Reduce"
+    ),
+    "async_gradient_reduce": (
+        "Multi-GPU: Asynchronously start the gradient reduce operations"
+        " during the backward pass. Can be more efficient, but requires some VRAM."
+    ),
+    "async_gradient_reduce_buffer": (
+        'Multi-GPU: Maximum VRAM for "Async Gradient Reduce", in megabytes.'
+        ' A multiple of this value can be needed if combined with "Fused Back Pass"'
+        ' and/or "Layer offload fraction"'
+    ),
+
+    "sample_after": "The interval used when automatically sampling from the model during training",
+    "sample_skip_first": "Start sampling automatically after this interval has elapsed.",
+    "sample_image_format": "File Format used when saving samples",
+    "non_ema_sampling": "Whether to include non-ema sampling when using ema.",
+    "samples_to_tensorboard": "Whether to include sample images in the Tensorboard output.",
+
+    "backup_after": "The interval used when automatically creating model backups during training",
+    "rolling_backup": "If rolling backups are enabled, older backups are deleted automatically",
+    "rolling_backup_count": "Defines the number of backups to keep if rolling backups are enabled",
+    "backup_before_save": "Create a full backup before saving the final model",
+    "save_every": "The interval used when automatically saving the model during training",
+    "save_skip_first": "Start saving automatically after this interval has elapsed",
+    "save_filename_prefix": "The prefix for filenames used when saving the model during training",
+
+    "aspect_ratio_bucketing": "Aspect ratio bucketing enables training on images with different aspect ratios",
+    "latent_caching": "Caching of intermediate training data that can be re-used between epochs",
+    "clear_cache_before_training": (
+        "Clears the cache directory before starting to train."
+        " Only disable this if you want to continue using the same cached data."
+        " Disabling this can lead to errors, if other settings are changed during a restart"
+    ),
+
+    "sample.frames": "Number of frames to generate. Only used when generating videos.",
+    "sample.length": "Length in seconds of audio output.",
+    "sample.sample_inpainting": "Enables inpainting sampling. Only available when sampling from an inpainting model.",
+    "sample.base_image_path": "The base image used when inpainting.",
+    "sample.mask_image_path": "The mask used when inpainting.",
+
+    "cloud.enabled": "Enable cloud training",
+    "cloud.type": (
+        "Choose LINUX to connect to a linux machine via SSH."
+        " Choose RUNPOD for additional functionality such as automatically creating and deleting pods."
+    ),
+    "cloud.file_sync": (
+        "Choose NATIVE_SCP to use scp.exe to transfer files."
+        " FABRIC_SFTP uses the Paramiko/Fabric SFTP implementation for file transfers instead."
+    ),
+    "secrets.cloud.api_key": (
+        "Cloud service API key for RUNPOD. Leave empty for LINUX."
+        " This value is stored separately, not saved to your configuration file."
+    ),
+    "secrets.cloud.host": (
+        "SSH server hostname or IP."
+        " Leave empty if you have a Cloud ID or want to automatically create a new cloud."
+    ),
+    "secrets.cloud.port": (
+        "SSH server port."
+        " Leave empty if you have a Cloud ID or want to automatically create a new cloud."
+    ),
+    "secrets.cloud.user": (
+        'SSH username. Use "root" for RUNPOD.'
+        " Your SSH client must be set up to connect to the cloud using a public key, without a password."
+        " For RUNPOD, create an ed25519 key locally, and copy the contents of the"
+        ' public keyfile to your "SSH Public Keys" on the RunPod website.'
+    ),
+    "secrets.cloud.key_file": (
+        "Absolute path to the private key file used for SSH connections."
+        " Leave empty to rely on your system SSH configuration."
+    ),
+    "secrets.cloud.password": (
+        "SSH password for password-based authentication."
+        " If you try to use native SCP requires sshpass to be installed."
+        " Leave empty to use key-based authentication."
+    ),
+    "secrets.cloud.id": (
+        "RUNPOD Cloud ID. The cloud service must have a public IP and SSH service."
+        " Leave empty if you want to automatically create a new RUNPOD cloud,"
+        " or if you're connecting to another cloud provider via SSH Hostname and Port."
+    ),
+    "cloud.tensorboard_tunnel": "Instead of starting tensorboard locally, make a TCP tunnel to a tensorboard on the cloud",
+    "cloud.remote_dir": "The directory on the cloud where files will be uploaded and downloaded.",
+    "cloud.onetrainer_dir": "The directory for OneTrainer on the cloud.",
+    "cloud.huggingface_cache_dir": "Huggingface models are downloaded to this remote directory.",
+    "cloud.install_onetrainer": "Automatically install OneTrainer from GitHub if the directory doesn't already exist.",
+    "cloud.install_cmd": (
+        "The command for installing OneTrainer."
+        " Leave the default, unless you want to use a development branch of OneTrainer."
+    ),
+    "cloud.update_onetrainer": "Update OneTrainer if it already exists on the cloud.",
+    "cloud.detach_trainer": "Allows the trainer to keep running even if your connection to the cloud is lost.",
+    "cloud.run_id": (
+        "An id identifying the remotely running trainer."
+        " In case you have lost connection or closed OneTrainer,"
+        " it will try to reattach to this id instead of starting a new remote trainer."
+    ),
+    "cloud.download_samples": "Download samples from the remote workspace directory to your local machine.",
+    "cloud.download_output_model": (
+        "Download the final model after training."
+        " You can disable this if you plan to use an automatically saved checkpoint instead."
+    ),
+    "cloud.download_saves": (
+        "Download the automatically saved training checkpoints from the"
+        " remote workspace directory to your local machine."
+    ),
+    "cloud.download_backups": (
+        "Download backups from the remote workspace directory to your local machine."
+        " It's usually not necessary to download them, because as long as the backups"
+        " are still available on the cloud, the training can be restarted using one of the cloud's backups."
+    ),
+    "cloud.download_tensorboard": (
+        "Download TensorBoard event logs from the remote workspace directory to your local machine."
+        " They can then be viewed locally in TensorBoard."
+        ' It is recommended to disable "Sample to TensorBoard" to reduce the event log size.'
+    ),
+    "cloud.delete_workspace": (
+        "Delete the workspace directory on the cloud after training has finished"
+        " successfully and data has been downloaded."
+    ),
+    "cloud.create": (
+        "Automatically creates a new cloud instance if both Host:Port and Cloud ID are empty."
+        " Currently supported for RUNPOD."
+    ),
+    "cloud.name": "The name of the new cloud instance.",
+    "cloud.sub_type": "Select the RunPod cloud type. See RunPod's website for details.",
+    "cloud.gpu_type": "Select the GPU type. Enter an API key before pressing the button.",
+    "cloud.volume_size": (
+        "Set the storage volume size in GB."
+        " This volume persists only until the cloud is deleted - not a RunPod network volume"
+    ),
+    "cloud.min_download": "Set the minimum download speed of the cloud in Mbps.",
+    "cloud.on_finish": (
+        "What to do when training finishes and the data has been fully downloaded:"
+        " Stop or delete the cloud, or do nothing."
+    ),
+    "cloud.on_error": (
+        "What to do if training stops due to an error:"
+        " Stop or delete the cloud, or do nothing. Data may be lost."
+    ),
+    "cloud.on_detached_finish": (
+        "What to do when training finishes, but the client has been detached"
+        " and cannot download data. Data may be lost."
+    ),
+    "cloud.on_detached_error": (
+        "What to do if training stops due to an error, but the client has been detached"
+        " and cannot download data. Data may be lost."
+    ),
+
+    "concept.name": "Name of the concept",
+    "concept.enabled": "Enable or disable this concept",
+    "concept.type": (
+        "STANDARD: Standard finetuning with the sample as training target\n"
+        "VALIDATION: Use concept for validation instead of training\n"
+        "PRIOR_PREDICTION: Use the sample to make a prediction using the model as it was"
+        " before training. This prediction is then used as the training target for the"
+        " model in training. This can be used as regularisation and to preserve prior model"
+        " knowledge while finetuning the model on other concepts. Only implemented for LoRA."
+    ),
+    "concept.path": "Path where the training data is located",
+    "concept.text.prompt_source": (
+        "The source for prompts used during training."
+        " When selecting 'From single text file', select a text file that contains a list of prompts"
+    ),
+    "concept.include_subdirectories": "Includes images from subdirectories into the dataset",
+    "concept.image_variations": "The number of different image versions to cache if latent caching is enabled.",
+    "concept.text_variations": "The number of different text versions to cache if latent caching is enabled.",
+    "concept.balancing": (
+        "The number of samples used during training."
+        " Use repeats to multiply the concept, or samples to specify an exact number of samples used in each epoch."
+    ),
+    "concept.loss_weight": "The loss multiplier for this concept.",
+
+    "concept.image.enable_crop_jitter": "Enables random cropping of samples",
+    "concept.image.enable_random_flip": "Randomly flip the sample during training",
+    "concept.image.enable_fixed_flip": "Apply a fixed horizontal flip to all images in this concept",
+    "concept.image.enable_random_rotate": "Randomly rotates the sample during training",
+    "concept.image.enable_fixed_rotate": "Apply a fixed rotation to all images in this concept",
+    "concept.image.enable_random_brightness": "Randomly adjusts the brightness of the sample during training",
+    "concept.image.enable_random_contrast": "Randomly adjusts the contrast of the sample during training",
+    "concept.image.enable_random_saturation": "Randomly adjusts the saturation of the sample during training",
+    "concept.image.enable_random_hue": "Randomly adjusts the hue of the sample during training",
+    "concept.image.enable_random_circular_mask_shrink": "Automatically create circular masks for masked training",
+    "concept.image.enable_random_mask_rotate_crop": "Randomly rotate the training samples and crop to the masked region",
+    "concept.image.enable_resolution_override": (
+        "Override the resolution for this concept."
+        " Optionally specify multiple resolutions separated by a comma,"
+        " or a single exact resolution in the format <width>x<height>"
+    ),
+
+    "concept.text.enable_tag_shuffling": "Enables tag shuffling",
+    "concept.text.tag_delimiter": "The delimiter between tags",
+    "concept.text.keep_tags_count": "The number of tags at the start of the caption that are not shuffled or dropped",
+    "concept.text.tag_dropout_enable": "Enables random dropout for tags in the captions.",
+    "concept.text.tag_dropout_mode": (
+        "Method used to drop captions."
+        " 'Full' will drop the entire caption past the 'kept' tags with a certain probability,"
+        " 'Random' will drop individual tags with the set probability,"
+        " and 'Random Weighted' will linearly increase the probability of dropping tags,"
+        " more likely to preserve tags near the front with full probability to drop at the end."
+    ),
+    "concept.text.tag_dropout_probability": "Probability to drop tags, from 0 to 1.",
+    "concept.text.tag_dropout_special_tags": (
+        "List of tags which will be whitelisted/blacklisted by dropout."
+        " 'Whitelist' tags will never be dropped but all others may be,"
+        " 'Blacklist' tags may be dropped but all others will never be,"
+        " 'None' may drop any tags."
+        " Can specify either a delimiter-separated list in the field,"
+        " or a file path to a .txt or .csv file with entries separated by newlines."
+    ),
+    "concept.text.tag_dropout_special_tags_mode": "Select whether special tags act as a whitelist, blacklist, or are disabled.",
+    "concept.text.tag_dropout_special_tags_regex": (
+        "Interpret special tags with regex, such as 'photo.*' to match"
+        " 'photo, photograph, photon' but not 'telephoto'."
+        " Includes exception for '/(' and '/)' syntax found in many booru/e6 tags."
+    ),
+    "concept.text.caps_randomize_enable": "Enables randomization of capitalization for tags in the caption.",
+    "concept.text.caps_randomize_lowercase": "If enabled, converts the caption to lowercase before any further processing.",
+    "concept.text.caps_randomize_mode": (
+        "Comma-separated list of types of capitalization randomization to perform."
+        " 'capslock' for ALL CAPS, 'title' for First Letter Of Every Word,"
+        " 'first' for First word only, 'random' for randomized letters."
+    ),
+    "concept.text.caps_randomize_probability": "Probability to randomize capitalization of each tag, from 0 to 1.",
+
+    "tools.dataset": "Open the captioning tool",
+    "tools.video": "Open the video tools",
+    "tools.convert_model": "Open the model conversion tool",
+    "tools.sampling": "Open the model sampling tool",
+    "tools.profiling": "Open the profiling tools.",
+}
+
+WIDE_TOOLTIPS: set[str] = {
+    "secrets.huggingface_token",
+    "timestep_distribution",
+    "dynamic_timestep_shifting",
+    "gradient_reduce_precision",
+}
diff --git a/web/scripts/ui_parser.py b/web/scripts/ui_parser.py
new file mode 100644
index 000000000..2027101e9
--- /dev/null
+++ b/web/scripts/ui_parser.py
@@ -0,0 +1,995 @@
+from __future__ import annotations
+
+import ast
+import logging
+import re
+from dataclasses import dataclass
+from dataclasses import field as dataclass_field
+from pathlib import Path
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class ParsedLabel:
+    frame_var: str
+    row: int
+    col: int
+    text: str
+    tooltip: str | None = None
+
+
+@dataclass
+class ParsedField:
+    frame_var: str
+    row: int
+    col: int
+    key: str
+    widget_type: str
+    tooltip: str | None = None
+    label: str | None = None
+    enum_ref: str | None = None
+    kv_options: list[dict[str, str]] | None = None
+    path_mode: str | None = None
+    unit_var: str | None = None
+    adv_command: str | None = None
+    preset_var: str | None = None
+    regex_var: str | None = None
+    dtype_subset: str | None = None
+    required: bool = False
+    nullable: bool = False
+
+
+@dataclass
+class ParsedSection:
+    id: str
+    label: str
+    fields: list[ParsedField] = dataclass_field(default_factory=list)
+    param_flags: dict[str, Any] = dataclass_field(default_factory=dict)
+
+
+@dataclass
+class ParsedFrameCall:
+    method_name: str
+    column_var: str
+    kwargs: dict[str, Any] = dataclass_field(default_factory=dict)
+    resolved_section_id: str | None = None
+
+
+@dataclass
+class ParsedVariant:
+    predicate: str
+    setup_method: str
+    frame_calls: list[ParsedFrameCall] = dataclass_field(default_factory=list)
+
+
+@dataclass
+class ParsedTab:
+    tab_id: str
+    class_name: str
+    layout: str
+    variants: list[ParsedVariant] = dataclass_field(default_factory=list)
+    sections: dict[str, ParsedSection] = dataclass_field(default_factory=dict)
+
+
+WIDGET_TYPE_MAP = {
+    "entry": "entry",
+    "switch": "toggle",
+    "options": "select",
+    "options_adv": "select-adv",
+    "options_kv": "select-kv",
+    "path_entry": "file",
+    "time_entry": "time-entry",
+    "layer_filter_entry": "layer-filter",
+}
+
+ADV_COMMAND_MAP = {
+    "__open_optimizer_params_window": "optimizer-params",
+    "_TrainingTab__open_optimizer_params_window": "optimizer-params",
+    "__open_scheduler_params_window": "scheduler-params",
+    "_TrainingTab__open_scheduler_params_window": "scheduler-params",
+    "__open_offloading_window": "offloading",
+    "_TrainingTab__open_offloading_window": "offloading",
+    "__open_timestep_distribution_window": "timestep-dist",
+    "_TrainingTab__open_timestep_distribution_window": "timestep-dist",
+}
+
+
+def _get_str(node: ast.expr) -> str | None:
+    if isinstance(node, ast.Constant) and isinstance(node.value, str):
+        return node.value
+    if isinstance(node, ast.JoinedStr):
+        parts = []
+        for v in node.values:
+            if isinstance(v, ast.Constant):
+                parts.append(str(v.value))
+            else:
+                parts.append("{...}")
+        return "".join(parts)
+    return None
+
+
+def _get_int(node: ast.expr) -> int | None:
+    if isinstance(node, ast.Constant) and isinstance(node.value, int):
+        return node.value
+    if isinstance(node, ast.UnaryOp) and isinstance(node.op, ast.USub):
+        v = _get_int(node.operand)
+        return -v if v is not None else None
+    return None
+
+
+def _get_int_or_lineno(node: ast.expr, call_node: ast.AST) -> int:
+    val = _get_int(node)
+    if val is not None:
+        return val
+    # Use negative line number to avoid collisions with real row numbers
+    return -(getattr(call_node, "lineno", 0))
+
+
+def _get_name(node: ast.expr) -> str | None:
+    if isinstance(node, ast.Name):
+        return node.id
+    if isinstance(node, ast.Attribute):
+        base = _get_name(node.value)
+        return f"{base}.{node.attr}" if base else node.attr
+    return None
+
+
+def _get_kwarg(call: ast.Call, name: str) -> ast.expr | None:
+    for kw in call.keywords:
+        if kw.arg == name:
+            return kw.value
+    return None
+
+
+def _get_kwarg_str(call: ast.Call, name: str) -> str | None:
+    node = _get_kwarg(call, name)
+    return _get_str(node) if node else None
+
+
+def _get_kwarg_bool(call: ast.Call, name: str) -> bool | None:
+    node = _get_kwarg(call, name)
+    if node is None:
+        return None
+    if isinstance(node, ast.Constant) and isinstance(node.value, bool):
+        return node.value
+    return None
+
+
+def _extract_enum_ref(node: ast.expr) -> str | None:
+    if isinstance(node, ast.ListComp):
+        for gen in node.generators:
+            iter_node = gen.iter
+            if isinstance(iter_node, ast.Call) and isinstance(iter_node.func, ast.Name):
+                if iter_node.func.id == "list" and len(iter_node.args) == 1:
+                    return _get_name(iter_node.args[0])
+    return None
+
+
+def _extract_kv_options(
+    node: ast.expr,
+    local_lists: dict[str, ast.List] | None = None,
+) -> list[dict[str, str]] | None:
+    # Resolve `options_kv(..., my_var, ...)` where `my_var = [(label, Enum.X), ...]`
+    # is assigned at the top of the enclosing method (e.g. RLHFTab.refresh_ui).
+    if isinstance(node, ast.Name) and local_lists:
+        resolved = local_lists.get(node.id)
+        if resolved is None:
+            return None
+        node = resolved
+    if not isinstance(node, ast.List):
+        return None
+    options = []
+    for elt in node.elts:
+        if isinstance(elt, ast.Tuple) and len(elt.elts) == 2:
+            label = _get_str(elt.elts[0])
+            value = _get_name(elt.elts[1])
+            if label and value:
+                if "." in value:
+                    value = value.split(".")[-1]
+                options.append({"label": label, "value": value})
+    return options if options else None
+
+
+def _extract_dtype_subset(node: ast.expr) -> str | None:
+    """Detect calls like ``self.__create_dtype_options(include_gguf=?, include_a8=?)``
+    and map them to a named subset in ``DTYPE_SUBSETS``.
+    """
+    if not isinstance(node, ast.Call):
+        return None
+    func_name = _get_name(node.func)
+    if not func_name:
+        return None
+    # Accept both ``self.__create_dtype_options`` and the name-mangled form.
+    if not func_name.endswith("__create_dtype_options") and not func_name.endswith("_create_dtype_options"):
+        return None
+
+    include_gguf = _get_kwarg_bool(node, "include_gguf") or False
+    include_a8 = _get_kwarg_bool(node, "include_a8") or False
+
+    if include_gguf:
+        return "with_gguf_a8"
+    if include_a8:
+        return "with_a8"
+    return "base"
+
+
+def _extract_adv_command_name(call: ast.Call) -> str | None:
+    node = _get_kwarg(call, "adv_command")
+    if node is None:
+        return None
+    name = _get_name(node)
+    if name and name.startswith("self."):
+        return name[5:]
+    return name
+
+
+class CtkTabParser:
+
+    def __init__(self):
+        self._tree: ast.Module | None = None
+        self._source: str = ""
+        self._class_node: ast.ClassDef | None = None
+        # Populated per section: top-level `name = [...]` assignments in the
+        # method being walked, so options_kv calls that reference a local list
+        # variable (e.g. RLHFTab.refresh_ui) can resolve it.
+        self._local_lists: dict[str, ast.List] = {}
+
+    @staticmethod
+    def _collect_local_list_assignments(stmts: list[ast.stmt]) -> dict[str, ast.List]:
+        result: dict[str, ast.List] = {}
+        for stmt in stmts:
+            if not isinstance(stmt, ast.Assign):
+                continue
+            if not isinstance(stmt.value, ast.List):
+                continue
+            if len(stmt.targets) != 1:
+                continue
+            target = stmt.targets[0]
+            if isinstance(target, ast.Name):
+                result[target.id] = stmt.value
+        return result
+
+    def parse_file(self, filepath: str | Path) -> ParsedTab | None:
+        filepath = Path(filepath)
+        if not filepath.exists():
+            logger.warning("File not found: %s", filepath)
+            return None
+
+        self._source = filepath.read_text(encoding="utf-8")
+        try:
+            self._tree = ast.parse(self._source)
+        except SyntaxError:
+            logger.error("Syntax error parsing %s", filepath)
+            return None
+
+        self._class_node = self._find_class()
+        if not self._class_node:
+            logger.warning("No class found in %s", filepath)
+            return None
+
+        class_name = self._class_node.name
+        tab_id = self._derive_tab_id(class_name, filepath.stem)
+
+        layout, variants = self._parse_refresh_ui()
+
+        for variant in variants:
+            variant.frame_calls = self._parse_setup_method(variant.setup_method)
+
+        sections = self._parse_sections_from_variants(variants)
+
+        if not variants and not sections:
+            sections = self._parse_static_tab(tab_id)
+
+        return ParsedTab(
+            tab_id=tab_id,
+            class_name=class_name,
+            layout=layout,
+            variants=variants,
+            sections=sections,
+        )
+
+    def parse_method_as_tab(self, method_name: str, tab_id: str) -> ParsedTab | None:
+        if not self._class_node:
+            return None
+
+        method = self._find_method(method_name)
+        if not method:
+            logger.warning("Method %s not found in %s", method_name, self._class_node.name)
+            return None
+
+        section = self._extract_section_from_body(method.body, tab_id, method)
+        if not section or not section.fields:
+            return None
+
+        return ParsedTab(
+            tab_id=tab_id,
+            class_name=self._class_node.name,
+            layout="single-column",
+            variants=[],
+            sections={section.id: section},
+        )
+
+    def _find_class(self) -> ast.ClassDef | None:
+        if not self._tree:
+            return None
+        for node in ast.walk(self._tree):
+            if isinstance(node, ast.ClassDef):
+                return node
+        return None
+
+    def _derive_tab_id(self, class_name: str, file_stem: str) -> str:
+        name = class_name
+        for suffix in ("Tab", "Window", "UI"):
+            if name.endswith(suffix):
+                name = name[:-len(suffix)]
+                break
+        return name.lower()
+
+    def _find_method(self, name: str) -> ast.FunctionDef | None:
+        if not self._class_node:
+            return None
+        mangled = f"_{self._class_node.name}{name}" if name.startswith("__") else name
+        for node in self._class_node.body:
+            if isinstance(node, ast.FunctionDef):
+                if node.name == name or node.name == mangled:
+                    return node
+        return None
+
+    def _parse_refresh_ui(self) -> tuple[str, list[ParsedVariant]]:
+        method = self._find_method("refresh_ui")
+        if not method:
+            return "single-column", []
+
+        column_vars = set()
+        for node in ast.walk(method):
+            if isinstance(node, ast.Assign):
+                for target in node.targets:
+                    name = _get_name(target)
+                    if name and re.match(r"column_\d+", name):
+                        column_vars.add(name)
+
+        layout = "three-column" if len(column_vars) >= 3 else "single-column"
+
+        # Only iterate direct body statements (not ast.walk) to avoid duplicates
+        variants: list[ParsedVariant] = []
+        for node in method.body:
+            if isinstance(node, ast.If):
+                self._extract_variants_from_if(node, variants)
+
+        return layout, variants
+
+    def _extract_variants_from_if(self, if_node: ast.If, variants: list[ParsedVariant]):
+        predicate = self._extract_model_type_predicate(if_node.test)
+        if predicate:
+            setup_method = self._extract_setup_call(if_node.body)
+            if setup_method:
+                variants.append(ParsedVariant(
+                    predicate=predicate,
+                    setup_method=setup_method,
+                ))
+
+        for elif_node in if_node.orelse:
+            if isinstance(elif_node, ast.If):
+                self._extract_variants_from_if(elif_node, variants)
+
+    def _extract_model_type_predicate(self, test: ast.expr) -> str | None:
+        if isinstance(test, ast.Call):
+            func_name = _get_name(test.func)
+            if func_name:
+                match = re.search(r"model_type\.(is_\w+|has_\w+)", func_name)
+                if match:
+                    return match.group(1)
+        return None
+
+    def _extract_setup_call(self, body: list[ast.stmt]) -> str | None:
+        for stmt in body:
+            if isinstance(stmt, ast.Expr) and isinstance(stmt.value, ast.Call):
+                func_name = _get_name(stmt.value.func)
+                if func_name and "setup" in func_name.lower():
+                    if func_name.startswith("self."):
+                        return func_name[5:]
+                    return func_name
+        return None
+
+    def _parse_setup_method(self, method_name: str) -> list[ParsedFrameCall]:
+        method = self._find_method(method_name)
+        if not method:
+            return []
+
+        frame_calls: list[ParsedFrameCall] = []
+        for stmt in method.body:
+            call: ast.Call | None = None
+            if isinstance(stmt, ast.Expr) and isinstance(stmt.value, ast.Call) or isinstance(stmt, ast.Assign) and isinstance(stmt.value, ast.Call):
+                call = stmt.value
+
+            if call is None:
+                continue
+
+            func_name = _get_name(call.func)
+            if not func_name:
+                continue
+
+            if not (func_name.startswith("self.") and "create" in func_name.lower()):
+                continue
+
+            clean_name = func_name[5:]
+
+            col_var = "column_0"
+            if len(call.args) >= 1:
+                col_var = _get_name(call.args[0]) or "column_0"
+
+            kwargs: dict[str, Any] = {}
+            for kw in call.keywords:
+                if kw.arg:
+                    val = _get_kwarg_bool(call, kw.arg)
+                    if val is None:
+                        int_val = _get_int(kw.value)
+                        val = int_val if int_val is not None else _get_str(kw.value)
+                    kwargs[kw.arg] = val
+
+            if "i" not in kwargs:
+                for kw in call.keywords:
+                    if kw.arg == "i":
+                        val = _get_int(kw.value)
+                        if val is not None:
+                            kwargs["i"] = val
+
+            frame_calls.append(ParsedFrameCall(
+                method_name=clean_name,
+                column_var=col_var,
+                kwargs=kwargs,
+            ))
+
+        return frame_calls
+
+    def _get_method_param_defaults(self, method_name: str) -> dict[str, Any]:
+        method = self._find_method(method_name)
+        if not method or not method.args:
+            return {}
+
+        defaults: dict[str, Any] = {}
+        all_args = [a for a in method.args.args if a.arg != "self"]
+        all_defaults = method.args.defaults
+
+        # Defaults are right-aligned with args
+        offset = len(all_args) - len(all_defaults)
+        for i, arg in enumerate(all_args):
+            if i >= offset:
+                default_node = all_defaults[i - offset]
+                if isinstance(default_node, ast.Constant):
+                    defaults[arg.arg] = default_node.value
+
+        return defaults
+
+    def _parse_sections_from_variants(
+        self,
+        variants: list[ParsedVariant],
+    ) -> dict[str, ParsedSection]:
+        """Parse frame methods with per-variant kwargs to produce filtered sections.
+
+        When different variants pass different kwargs to the same method,
+        variant-specific sections are created with qualified IDs (e.g. ``base__1``).
+        """
+        defaults_cache: dict[str, dict[str, Any]] = {}
+        combo_to_fcs: dict[tuple[str, frozenset], list[ParsedFrameCall]] = {}
+        method_to_sigs: dict[str, list[frozenset]] = {}
+
+        for variant in variants:
+            for fc in variant.frame_calls:
+                mn = fc.method_name
+                if mn not in defaults_cache:
+                    defaults_cache[mn] = self._get_method_param_defaults(mn)
+
+                # Separate filter kwargs from the ``i`` kwarg (handled by template expansion)
+                filter_kw = {k: v for k, v in fc.kwargs.items() if k != "i"}
+                merged = dict(defaults_cache[mn])
+                merged.update(filter_kw)
+                sig = frozenset(sorted(merged.items()))
+
+                key = (mn, sig)
+                combo_to_fcs.setdefault(key, []).append(fc)
+                if mn not in method_to_sigs:
+                    method_to_sigs[mn] = []
+                if sig not in method_to_sigs[mn]:
+                    method_to_sigs[mn].append(sig)
+
+        sections: dict[str, ParsedSection] = {}
+        combo_to_section_id: dict[tuple[str, frozenset], str] = {}
+
+        for (mn, sig) in combo_to_fcs:
+            merged_kwargs = dict(sig)
+            section = self._parse_frame_method(mn, call_kwargs=merged_kwargs)
+            if not section:
+                continue
+
+            base_id = section.id
+            sigs = method_to_sigs[mn]
+
+            if len(sigs) > 1:
+                idx = sigs.index(sig)
+                if idx > 0:
+                    section = ParsedSection(
+                        id=f"{base_id}__{idx}",
+                        label=section.label,
+                        fields=list(section.fields),
+                        param_flags=dict(section.param_flags),
+                    )
+
+            sections[section.id] = section
+            combo_to_section_id[(mn, sig)] = section.id
+
+        for variant in variants:
+            for fc in variant.frame_calls:
+                mn = fc.method_name
+                filter_kw = {k: v for k, v in fc.kwargs.items() if k != "i"}
+                merged = dict(defaults_cache.get(mn, {}))
+                merged.update(filter_kw)
+                sig = frozenset(sorted(merged.items()))
+                fc.resolved_section_id = combo_to_section_id.get((mn, sig))
+
+        return sections
+
+    def _parse_static_tab(self, tab_id: str) -> dict[str, ParsedSection]:
+        sections: dict[str, ParsedSection] = {}
+
+        lora_method = self._find_method("setup_lora")
+        if lora_method:
+            refresh = self._find_method("refresh_ui")
+            if refresh:
+                header = self._extract_section_from_body(refresh.body, f"{tab_id}_header", refresh)
+                if header and header.fields:
+                    sections[header.id] = header
+
+            lora_sections = self._parse_peft_method(lora_method, tab_id)
+            sections.update(lora_sections)
+            return sections
+
+        init_method = self._find_method("__init__")
+        if init_method:
+            section = self._extract_section_from_body(init_method.body, tab_id, init_method)
+            if section and section.fields:
+                sections[section.id] = section
+
+        if not sections:
+            widget_sections = self._parse_nested_widget_class(tab_id)
+            sections.update(widget_sections)
+
+        return sections
+
+    def _parse_nested_widget_class(self, tab_id: str) -> dict[str, ParsedSection]:
+        if not self._tree or not self._class_node:
+            return {}
+
+        sections: dict[str, ParsedSection] = {}
+
+        for node in ast.iter_child_nodes(self._tree):
+            if isinstance(node, ast.ClassDef) and node is not self._class_node:
+                for method in node.body:
+                    if isinstance(method, ast.FunctionDef) and method.name == "__init__":
+                        section = self._extract_section_from_body(
+                            method.body, tab_id, method
+                        )
+                        if section and section.fields:
+                            section.label = _label_from_key(tab_id)
+                            sections[section.id] = section
+                            logger.info(
+                                "Parsed nested widget class %s.__init__() -> %d fields",
+                                node.name, len(section.fields),
+                            )
+
+        return sections
+
+    _PEFT_DISPLAY_NAMES: dict[str, str] = {
+        "LORA": "LoRA",
+        "LOHA": "LoHa",
+        "OFT_2": "OFT v2",
+    }
+
+    def _peft_display_name(self, branch_label: str) -> str:
+        if branch_label in self._PEFT_DISPLAY_NAMES:
+            return self._PEFT_DISPLAY_NAMES[branch_label]
+        for part in branch_label.split("_or_"):
+            if part in self._PEFT_DISPLAY_NAMES:
+                return self._PEFT_DISPLAY_NAMES[part]
+        return "LoRA"
+
+    @staticmethod
+    def _expand_peft_templates(section: ParsedSection, display_name: str) -> None:
+        for field in section.fields:
+            if field.label and "{...}" in field.label:
+                field.label = field.label.replace("{...}", display_name)
+            if field.tooltip and "{...}" in field.tooltip:
+                field.tooltip = field.tooltip.replace("{...}", display_name)
+
+    def _parse_peft_method(self, method: ast.FunctionDef, tab_id: str) -> dict[str, ParsedSection]:
+        sections: dict[str, ParsedSection] = {}
+
+        unconditional_stmts: list[ast.stmt] = []
+        conditional_branches: list[tuple[str, list[ast.stmt]]] = []
+
+        for stmt in method.body:
+            if isinstance(stmt, ast.If):
+                branch_label = self._extract_peft_condition_label(stmt.test)
+                if branch_label:
+                    conditional_branches.append((branch_label, stmt.body))
+                    remaining = stmt.orelse
+                    while remaining:
+                        if len(remaining) == 1 and isinstance(remaining[0], ast.If):
+                            elif_node = remaining[0]
+                            elif_label = self._extract_peft_condition_label(elif_node.test)
+                            if elif_label:
+                                conditional_branches.append((elif_label, elif_node.body))
+                            remaining = elif_node.orelse
+                        else:
+                            conditional_branches.append(("else", remaining))
+                            break
+                else:
+                    unconditional_stmts.append(stmt)
+            else:
+                unconditional_stmts.append(stmt)
+
+        if unconditional_stmts:
+            shared = self._extract_section_from_body(
+                unconditional_stmts, f"{tab_id}_shared", method
+            )
+            if shared and shared.fields:
+                self._expand_peft_templates(shared, self._peft_display_name("shared"))
+                sections[shared.id] = shared
+
+        for branch_label, branch_body in conditional_branches:
+            section_id = f"{tab_id}_{branch_label.lower()}"
+            section = self._extract_section_from_body(branch_body, section_id, method)
+            if section and section.fields:
+                section.label = f"{_label_from_key(tab_id)} ({branch_label})"
+                self._expand_peft_templates(section, self._peft_display_name(branch_label))
+                sections[section.id] = section
+
+        return sections
+
+    def _extract_peft_condition_label(self, test: ast.expr) -> str | None:
+        if isinstance(test, ast.Compare):
+            for comparator in test.comparators:
+                name = _get_name(comparator)
+                if name and "PeftType." in name:
+                    return name.split(".")[-1]
+        if isinstance(test, ast.BoolOp):
+            parts = []
+            for val in test.values:
+                label = self._extract_peft_condition_label(val)
+                if label:
+                    parts.append(label)
+            if parts:
+                return "_or_".join(parts)
+        return None
+
+    def _extract_section_from_body(
+        self,
+        stmts: list[ast.stmt],
+        section_id: str,
+        method: ast.FunctionDef,
+    ) -> ParsedSection | None:
+        labels: list[ParsedLabel] = []
+        fields: list[ParsedField] = []
+        subframe_map: dict[str, tuple[str, int, int]] = {}
+
+        prev_locals = self._local_lists
+        self._local_lists = self._collect_local_list_assignments(stmts)
+        try:
+            self._walk_for_components(stmts, labels, fields, "frame", method, None, subframe_map)
+        finally:
+            self._local_lists = prev_locals
+
+        if not fields:
+            return None
+
+        self._correlate_labels_to_fields(labels, fields, subframe_map)
+
+        section_label = _label_from_key(section_id)
+
+        return ParsedSection(
+            id=section_id,
+            label=section_label,
+            fields=fields,
+        )
+
+    def _correlate_labels_to_fields(
+        self,
+        labels: list[ParsedLabel],
+        fields: list[ParsedField],
+        subframe_map: dict[str, tuple[str, int, int]] | None = None,
+    ):
+        if subframe_map is None:
+            subframe_map = {}
+
+        label_map: dict[tuple[str, int, int], ParsedLabel] = {}
+        label_row_map: dict[tuple[str, int], list[ParsedLabel]] = {}
+        for lbl in labels:
+            if lbl.row >= 0:
+                label_map[(lbl.frame_var, lbl.row, lbl.col)] = lbl
+                key = (lbl.frame_var, lbl.row)
+                if key not in label_row_map:
+                    label_row_map[key] = []
+                label_row_map[key].append(lbl)
+
+        for fld in fields:
+            if fld.row >= 0:
+                col_key = (fld.frame_var, fld.row, fld.col - 1)
+                if col_key in label_map:
+                    lbl = label_map[col_key]
+                    if not fld.label:
+                        fld.label = lbl.text
+                    if not fld.tooltip and lbl.tooltip:
+                        fld.tooltip = lbl.tooltip
+                    continue
+
+                # Sub-frame lookup: field's frame is a sub-frame placed in a parent via .grid()
+                if fld.frame_var in subframe_map:
+                    parent_frame, parent_row, parent_col = subframe_map[fld.frame_var]
+                    parent_key = (parent_frame, parent_row, parent_col - 1)
+                    if parent_key in label_map:
+                        lbl = label_map[parent_key]
+                        if not fld.label:
+                            fld.label = lbl.text
+                        if not fld.tooltip and lbl.tooltip:
+                            fld.tooltip = lbl.tooltip
+                        continue
+
+                row_key = (fld.frame_var, fld.row)
+                if row_key in label_row_map:
+                    candidates = [lb for lb in label_row_map[row_key] if lb.col < fld.col]
+                    if candidates:
+                        lbl = max(candidates, key=lambda lb: lb.col)
+                        if not fld.label:
+                            fld.label = lbl.text
+                        if not fld.tooltip and lbl.tooltip:
+                            fld.tooltip = lbl.tooltip
+
+        unmatched_fields = [f for f in fields if not f.label]
+        if unmatched_fields:
+            all_items: list[tuple[int, str, ParsedLabel | ParsedField]] = [
+                (abs(lbl.row), "label", lbl) for lbl in labels
+            ]
+            all_items.extend((abs(fld.row), "field", fld) for fld in fields)
+            all_items.sort(key=lambda x: x[0])
+
+            pending_label: ParsedLabel | None = None
+            for _, kind, item in all_items:
+                if kind == "label":
+                    pending_label = item  # type: ignore
+                elif kind == "field" and pending_label and not item.label:  # type: ignore
+                    fld = item  # type: ignore
+                    fld.label = pending_label.text
+                    if not fld.tooltip and pending_label.tooltip:
+                        fld.tooltip = pending_label.tooltip
+                    pending_label = None
+
+        for fld in fields:
+            if not fld.label:
+                fld.label = _label_from_key(fld.key)
+
+    def _parse_frame_method(self, method_name: str, call_kwargs: dict[str, Any] | None = None) -> ParsedSection | None:
+        method = self._find_method(method_name)
+        if not method:
+            logger.warning("Method not found: %s", method_name)
+            return None
+
+        section_id = method_name
+        for prefix in ("__create_", "_create_"):
+            if section_id.startswith(prefix):
+                section_id = section_id[len(prefix):]
+        for suffix in ("_frame", "_components"):
+            if section_id.endswith(suffix):
+                section_id = section_id[:-len(suffix)]
+                break
+
+        labels: list[ParsedLabel] = []
+        fields: list[ParsedField] = []
+        subframe_map: dict[str, tuple[str, int, int]] = {}
+
+        prev_locals = self._local_lists
+        self._local_lists = self._collect_local_list_assignments(method.body)
+        try:
+            self._walk_for_components(method.body, labels, fields, "frame", method, call_kwargs, subframe_map)
+        finally:
+            self._local_lists = prev_locals
+
+        self._correlate_labels_to_fields(labels, fields, subframe_map)
+
+        section_label = _label_from_key(section_id)
+
+        param_flags = {}
+        if method.args:
+            for arg in method.args.args:
+                if arg.arg not in ("self", "master", "row"):
+                    param_flags[arg.arg] = None
+            for default, arg in zip(
+                reversed(method.args.defaults),
+                reversed(method.args.args),
+                strict=False,
+            ):
+                if arg.arg in param_flags:
+                    if isinstance(default, ast.Constant):
+                        param_flags[arg.arg] = default.value
+
+        return ParsedSection(
+            id=section_id,
+            label=section_label,
+            fields=fields,
+            param_flags=param_flags,
+        )
+
+    def _walk_for_components(
+        self,
+        stmts: list[ast.stmt],
+        labels: list[ParsedLabel],
+        fields: list[ParsedField],
+        frame_var: str,
+        method: ast.FunctionDef,
+        call_kwargs: dict[str, Any] | None = None,
+        subframe_map: dict[str, tuple[str, int, int]] | None = None,
+    ):
+        subframe_parents: dict[str, str] = {}
+
+        for stmt in stmts:
+            if isinstance(stmt, ast.If):
+                cond_name = _get_name(stmt.test)
+                if cond_name and call_kwargs is not None:
+                    cond_val = call_kwargs.get(cond_name)
+                    if cond_val is True or cond_val is None:
+                        self._walk_for_components(stmt.body, labels, fields, frame_var, method, call_kwargs, subframe_map)
+                    if stmt.orelse:
+                        self._walk_for_components(stmt.orelse, labels, fields, frame_var, method, call_kwargs, subframe_map)
+                else:
+                    self._walk_for_components(stmt.body, labels, fields, frame_var, method, call_kwargs, subframe_map)
+                    if stmt.orelse:
+                        self._walk_for_components(stmt.orelse, labels, fields, frame_var, method, call_kwargs, subframe_map)
+                continue
+
+            if isinstance(stmt, ast.Assign) and isinstance(stmt.value, ast.Call):
+                assign_func = _get_name(stmt.value.func)
+                if assign_func and assign_func.endswith("CTkFrame"):
+                    if len(stmt.value.args) >= 1 and len(stmt.targets) == 1:
+                        sf_var = _get_name(stmt.targets[0])
+                        sf_parent = _get_name(stmt.value.args[0])
+                        if sf_var and sf_parent:
+                            subframe_parents[sf_var] = sf_parent
+
+            if isinstance(stmt, ast.Expr) and isinstance(stmt.value, ast.Call):
+                grid_func = _get_name(stmt.value.func)
+                if grid_func and grid_func.endswith(".grid"):
+                    sf_var = grid_func.rsplit(".grid", 1)[0]
+                    if sf_var in subframe_parents:
+                        grid_row_node = _get_kwarg(stmt.value, "row")
+                        grid_col_node = _get_kwarg(stmt.value, "column")
+                        grid_row = _get_int(grid_row_node) if grid_row_node else None
+                        grid_col = _get_int(grid_col_node) if grid_col_node else None
+                        if grid_row is not None and grid_col is not None and subframe_map is not None:
+                            subframe_map[sf_var] = (
+                                subframe_parents[sf_var],
+                                grid_row,
+                                grid_col,
+                            )
+
+            calls = []
+            if isinstance(stmt, (ast.Expr, ast.Assign)) and isinstance(stmt.value, ast.Call):
+                calls.append(stmt.value)
+            elif isinstance(stmt, ast.Assign) and isinstance(stmt.value, ast.Tuple):
+                calls.extend(elt for elt in stmt.value.elts if isinstance(elt, ast.Call))
+
+            for call in calls:
+                func_name = _get_name(call.func)
+                if not func_name:
+                    continue
+
+                if func_name.startswith("components."):
+                    widget = func_name.split(".")[-1]
+                    if widget == "label":
+                        parsed = self._parse_label_call(call, frame_var)
+                        if parsed:
+                            labels.append(parsed)
+                    elif widget in WIDGET_TYPE_MAP:
+                        parsed = self._parse_widget_call(call, widget, frame_var)
+                        if parsed:
+                            fields.append(parsed)
+
+    def _parse_label_call(self, call: ast.Call, default_frame: str) -> ParsedLabel | None:
+        if len(call.args) < 4:
+            return None
+
+        frame_var = _get_name(call.args[0]) or default_frame
+        row = _get_int_or_lineno(call.args[1], call)
+        col = _get_int(call.args[2]) if len(call.args) > 2 else None
+        col = col if col is not None else 0
+        text = _get_str(call.args[3])
+        if not text:
+            return None
+        tooltip = _get_kwarg_str(call, "tooltip")
+
+        return ParsedLabel(frame_var=frame_var, row=row, col=col, text=text, tooltip=tooltip)
+
+    def _parse_widget_call(self, call: ast.Call, widget: str, default_frame: str) -> ParsedField | None:
+        if len(call.args) < 3:
+            return None
+
+        frame_var = _get_name(call.args[0]) or default_frame
+        row = _get_int_or_lineno(call.args[1], call)
+        col = _get_int(call.args[2]) if len(call.args) > 2 else None
+        col = col if col is not None else 0
+
+        field = ParsedField(
+            frame_var=frame_var,
+            row=row,
+            col=col,
+            key="",
+            widget_type=WIDGET_TYPE_MAP.get(widget, "entry"),
+        )
+
+        if widget == "entry":
+            if len(call.args) >= 5:
+                field.key = _get_str(call.args[4]) or ""
+            field.tooltip = _get_kwarg_str(call, "tooltip")
+            field.required = _get_kwarg_bool(call, "required") or False
+
+        elif widget == "switch":
+            if len(call.args) >= 5:
+                field.key = _get_str(call.args[4]) or ""
+            elif len(call.args) >= 4:
+                key = _get_kwarg_str(call, "var_name")
+                field.key = key or ""
+
+        elif widget == "options":
+            if len(call.args) >= 6:
+                field.key = _get_str(call.args[5]) or ""
+                field.enum_ref = _extract_enum_ref(call.args[3])
+
+        elif widget == "options_adv":
+            if len(call.args) >= 6:
+                field.key = _get_str(call.args[5]) or ""
+                field.enum_ref = _extract_enum_ref(call.args[3])
+            field.adv_command = _extract_adv_command_name(call)
+
+        elif widget == "options_kv":
+            if len(call.args) >= 6:
+                field.key = _get_str(call.args[5]) or ""
+                field.kv_options = _extract_kv_options(call.args[3], self._local_lists)
+                if field.kv_options is None:
+                    field.dtype_subset = _extract_dtype_subset(call.args[3])
+            field.widget_type = "select-kv"
+
+        elif widget == "path_entry":
+            if len(call.args) >= 5:
+                field.key = _get_str(call.args[4]) or ""
+            mode = _get_kwarg_str(call, "mode")
+            field.path_mode = mode or "file"
+            field.widget_type = "dir" if mode == "dir" else "file"
+
+        elif widget == "time_entry":
+            if len(call.args) >= 5:
+                field.key = _get_str(call.args[4]) or ""
+            if len(call.args) >= 6:
+                field.unit_var = _get_str(call.args[5]) or ""
+
+        elif widget == "layer_filter_entry":
+            if len(call.args) >= 5:
+                field.preset_var = _get_str(call.args[4]) or ""
+            field.key = _get_kwarg_str(call, "entry_var_name") or field.preset_var or "layer_filter"
+            field.regex_var = _get_kwarg_str(call, "regex_var_name")
+
+        if not field.key:
+            logger.debug("Could not extract key from %s call at line %d", widget, call.lineno)
+            return None
+
+        return field
+
+
+def _label_from_key(key: str) -> str:
+    name = key.split(".")[-1]
+    words = name.replace("_", " ").split()
+    return " ".join(w.capitalize() for w in words)
+
+
+def parse_ui_file(filepath: str | Path) -> ParsedTab | None:
+    parser = CtkTabParser()
+    return parser.parse_file(filepath)

From 80c772c514125ac701db3655ca82209964c29f64 Mon Sep 17 00:00:00 2001
From: BitcrushedHeart <215311041+BitcrushedHeart@users.noreply.github.com>
Date: Sun, 5 Jul 2026 15:28:56 +0100
Subject: [PATCH 2/2] Web UI cleanup: remove dead code and de-duplicate

Dead code (grep-verified, pure deletion):
- Delete unused useArrayField hook and Skeleton component
- Remove dead configStore/uiSchemaStore/trainingStore methods and
  configApi.getSchema
- Strip unused ErrorBoundary fallback/fallbackRender/onReset props
- Prune 13 unused brandColors constants

De-duplication (behavior-preserving):
- Parametrize ScalarChart and delete PerformancePage's near-verbatim
  MetricChart copy
- Extract shared SampleParamsForm from Manual/Standalone sampling modals
- Factor VideoToolModal's twin extract tabs into a shared hook + scaffold
- Extract hardenWindow/loadRenderer helpers in Electron main

Replace 276-line hand-rolled markdown parser with marked + existing
DOMPurify sanitizer.

Net: 640 fewer source lines. Typecheck, ESLint (strict), and production
build all pass.

Claude-Session: https://claude.ai/code/session_018zFRV8uwTfLT4krm3zwVDz
---
 web/gui/package-lock.json                     | 10309 ++++++++++++++++
 web/gui/package.json                          |     1 +
 web/gui/src/main/index.ts                     |   176 +-
 web/gui/src/renderer/api/configApi.ts         |    14 -
 .../src/renderer/components/ErrorBoundary.tsx |    33 +-
 .../components/modals/ManualSamplingModal.tsx |   107 +-
 .../modals/StandaloneSamplingModal.tsx        |   131 +-
 .../components/modals/VideoToolModal.tsx      |   304 +-
 .../renderer/components/modals/sampleForm.tsx |   142 +
 .../components/shared/ScalarChart.tsx         |    39 +-
 .../renderer/components/shared/Skeleton.tsx   |    17 -
 .../src/renderer/components/shared/index.ts   |     1 -
 web/gui/src/renderer/hooks/useArrayField.ts   |    49 -
 .../src/renderer/pages/PerformancePage.tsx    |   262 +-
 web/gui/src/renderer/store/trainingStore.ts   |     4 -
 web/gui/src/renderer/store/uiSchemaStore.ts   |    11 +-
 web/gui/src/renderer/utils/markdown.ts        |   226 +-
 web/gui/src/shared/brandColors.ts             |    15 -
 18 files changed, 10755 insertions(+), 1086 deletions(-)
 create mode 100644 web/gui/package-lock.json
 create mode 100644 web/gui/src/renderer/components/modals/sampleForm.tsx
 delete mode 100644 web/gui/src/renderer/components/shared/Skeleton.tsx
 delete mode 100644 web/gui/src/renderer/hooks/useArrayField.ts

diff --git a/web/gui/package-lock.json b/web/gui/package-lock.json
new file mode 100644
index 000000000..8d6fc4b4f
--- /dev/null
+++ b/web/gui/package-lock.json
@@ -0,0 +1,10309 @@
+{
+  "name": "onetrainer",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "onetrainer",
+      "version": "0.1.0",
+      "license": "AGPL-3.0-only",
+      "dependencies": {
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-search": "^0.16.0",
+        "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/xterm": "^6.0.0",
+        "dompurify": "^3.3.1",
+        "immer": "^10.1.1",
+        "lucide-react": "^0.511.0",
+        "marked": "^16.4.2",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "zustand": "^5.0.5"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.27.0",
+        "@tailwindcss/vite": "^4.2.0",
+        "@types/dompurify": "^3.0.5",
+        "@types/node": "^22.15.0",
+        "@types/react": "^19.1.6",
+        "@types/react-dom": "^19.1.6",
+        "@vitejs/plugin-react": "^4.6.0",
+        "concurrently": "^9.1.2",
+        "electron": "^40.6.0",
+        "electron-builder": "^26.8.1",
+        "eslint": "^9.27.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.5",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-simple-import-sort": "^13.0.0",
+        "prettier": "^3.8.2",
+        "tailwindcss": "^4.2.0",
+        "typescript": "^5.8.3",
+        "typescript-eslint": "^8.32.0",
+        "vite": "^7.3.1"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@develar/schema-utils": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
+      "integrity": "sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.0",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/@electron/asar": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.4.1.tgz",
+      "integrity": "sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^5.0.0",
+        "glob": "^7.1.6",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "asar": "bin/asar.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/@electron/fuses": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@electron/fuses/-/fuses-1.8.0.tgz",
+      "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "fs-extra": "^9.0.1",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "electron-fuses": "dist/bin.js"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/get": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz",
+      "integrity": "sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "env-paths": "^2.2.0",
+        "fs-extra": "^8.1.0",
+        "got": "^11.8.5",
+        "progress": "^2.0.3",
+        "semver": "^6.2.0",
+        "sumchecker": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "global-agent": "^3.0.0"
+      }
+    },
+    "node_modules/@electron/notarize": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-2.5.0.tgz",
+      "integrity": "sha512-jNT8nwH1f9X5GEITXaQ8IF/KdskvIkOFfB2CvwumsveVidzpSc+mvhhTMdAGSYF3O+Nq49lJ7y+ssODRXu06+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.1",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.3.3.tgz",
+      "integrity": "sha512-KZ8mhXvWv2rIEgMbWZ4y33bDHyUKMXnx4M0sTyPNK/vcB81ImdeY9Ggdqy0SWbMDgmbqyQ+phgejh6V3R2QuSg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "compare-version": "^0.1.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.0.0",
+        "isbinaryfile": "^4.0.8",
+        "minimist": "^1.2.6",
+        "plist": "^3.0.5"
+      },
+      "bin": {
+        "electron-osx-flat": "bin/electron-osx-flat.js",
+        "electron-osx-sign": "bin/electron-osx-sign.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/isbinaryfile": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/rebuild": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@electron/rebuild/-/rebuild-4.0.3.tgz",
+      "integrity": "sha512-u9vpTHRMkOYCs/1FLiSVAFZ7FbjsXK+bQuzviJZa+lG7BHZl1nz52/IcGvwa3sk80/fc3llutBkbCq10Vh8WQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "debug": "^4.1.1",
+        "detect-libc": "^2.0.1",
+        "got": "^11.7.0",
+        "graceful-fs": "^4.2.11",
+        "node-abi": "^4.2.0",
+        "node-api-version": "^0.2.1",
+        "node-gyp": "^11.2.0",
+        "ora": "^5.1.0",
+        "read-binary-file-arch": "^1.0.6",
+        "semver": "^7.3.5",
+        "tar": "^7.5.6",
+        "yargs": "^17.0.1"
+      },
+      "bin": {
+        "electron-rebuild": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@electron/rebuild/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/universal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-2.0.3.tgz",
+      "integrity": "sha512-Wn9sPYIVFRFl5HmwMJkARCCf7rqK/EurkfQ/rJZ14mHP3iYTjZSIOSVonEAnhWeAXwtw7zOekGRlc6yTtZ0t+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/asar": "^3.3.1",
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "debug": "^4.3.1",
+        "dir-compare": "^4.2.0",
+        "fs-extra": "^11.1.1",
+        "minimatch": "^9.0.3",
+        "plist": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16.4"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/fs-extra": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz",
+      "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/windows-sign": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@electron/windows-sign/-/windows-sign-1.2.2.tgz",
+      "integrity": "sha512-dfZeox66AvdPtb2lD8OsIIQh12Tp0GNCRUDfBHIKGpbmopZto2/A8nSpYYLoedPIHpqkeblZ/k8OV0Gy7PYuyQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "cross-dirname": "^0.1.0",
+        "debug": "^4.3.4",
+        "fs-extra": "^11.1.1",
+        "minimist": "^1.2.8",
+        "postject": "^1.0.0-alpha.6"
+      },
+      "bin": {
+        "electron-windows-sign": "bin/electron-windows-sign.js"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@electron/windows-sign/node_modules/fs-extra": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz",
+      "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@electron/windows-sign/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/windows-sign/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.3",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz",
+      "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@malept/cross-spawn-promise": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz",
+      "integrity": "sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/malept"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/subscription/pkg/npm-.malept-cross-spawn-promise?utm_medium=referral&utm_source=npm_fund"
+        }
+      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@malept/flatpak-bundler/-/flatpak-bundler-0.4.0.tgz",
+      "integrity": "sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.0",
+        "lodash": "^4.17.15",
+        "tmp-promise": "^3.0.2"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@npmcli/agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-3.0.0.tgz",
+      "integrity": "sha512-S79NdEgDQd/NGCay6TCoVzXSj74skRZIKJcpJjC5lOq34SZzyI6MqtiiWoiVWoVrTcGjNeC4ipbh1VIHlpfF5Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@npmcli/agent/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@npmcli/fs": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-4.0.0.tgz",
+      "integrity": "sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@npmcli/fs/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
+      "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defer-to-connect": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.0.tgz",
+      "integrity": "sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.31.1",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.0.tgz",
+      "integrity": "sha512-AZqQzADaj742oqn2xjl5JbIOzZB/DGCYF/7bpvhA8KvjUj9HJkag6bBuwZvH1ps6dfgxNHyuJVlzSr2VpMgdTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.0",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.0",
+        "@tailwindcss/oxide-darwin-x64": "4.2.0",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.0",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.0",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.0",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.0",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.0",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.0",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.0",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.0.tgz",
+      "integrity": "sha512-F0QkHAVaW/JNBWl4CEKWdZ9PMb0khw5DCELAOnu+RtjAfx5Zgw+gqCHFvqg3AirU1IAd181fwOtJQ5I8Yx5wtw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.0.tgz",
+      "integrity": "sha512-I0QylkXsBsJMZ4nkUNSR04p6+UptjcwhcVo3Zu828ikiEqHjVmQL9RuQ6uT/cVIiKpvtVA25msu/eRV97JeNSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.0.tgz",
+      "integrity": "sha512-6TmQIn4p09PBrmnkvbYQ0wbZhLtbaksCDx7Y7R3FYYx0yxNA7xg5KP7dowmQ3d2JVdabIHvs3Hx4K3d5uCf8xg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.0.tgz",
+      "integrity": "sha512-qBudxDvAa2QwGlq9y7VIzhTvp2mLJ6nD/G8/tI70DCDoneaUeLWBJaPcbfzqRIWraj+o969aDQKvKW9dvkUizw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.0.tgz",
+      "integrity": "sha512-7XKkitpy5NIjFZNUQPeUyNJNJn1CJeV7rmMR+exHfTuOsg8rxIO9eNV5TSEnqRcaOK77zQpsyUkBWmPy8FgdSg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.0.tgz",
+      "integrity": "sha512-Mff5a5Q3WoQR01pGU1gr29hHM1N93xYrKkGXfPw/aRtK4bOc331Ho4Tgfsm5WDGvpevqMpdlkCojT3qlCQbCpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.0.tgz",
+      "integrity": "sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.0.tgz",
+      "integrity": "sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.0.tgz",
+      "integrity": "sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.0.tgz",
+      "integrity": "sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.0.tgz",
+      "integrity": "sha512-2UU/15y1sWDEDNJXxEIrfWKC2Yb4YgIW5Xz2fKFqGzFWfoMHWFlfa1EJlGO2Xzjkq/tvSarh9ZTjvbxqWvLLXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.0.tgz",
+      "integrity": "sha512-CrFadmFoc+z76EV6LPG1jx6XceDsaCG3lFhyLNo/bV9ByPrE+FnBPckXQVP4XRkN76h3Fjt/a+5Er/oA/nCBvQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.0.tgz",
+      "integrity": "sha512-da9mFCaHpoOgtQiWtDGIikTrSpUFBtIZCG3jy/u2BGV+l/X1/pbxzmIUxNt6JWm19N3WtGi4KlJdSH/Si83WOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.0",
+        "@tailwindcss/oxide": "4.2.0",
+        "tailwindcss": "4.2.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/cacheable-request": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-cache-semantics": "*",
+        "@types/keyv": "^3.1.4",
+        "@types/node": "*",
+        "@types/responselike": "^1.0.0"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/fs-extra": {
+      "version": "9.0.13",
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
+      "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-L3LgimLHXtGkWikKnsPg0/VFx9OGZaC+eN1u4r+OB1XRqH3meBIAVC2zr1WdMH+RHmnRkqliQAOHNJ/E0j/e0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/keyv": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.11.tgz",
+      "integrity": "sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/plist": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
+      "integrity": "sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*",
+        "xmlbuilder": ">=11.0.1"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/responselike": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/verror": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.11.tgz",
+      "integrity": "sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
+      "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/type-utils": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.56.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
+      "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
+      "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.56.0",
+        "@typescript-eslint/types": "^8.56.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
+      "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
+      "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
+      "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
+      "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
+      "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.56.0",
+        "@typescript-eslint/tsconfig-utils": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
+      "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
+      "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.13",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
+      "integrity": "sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/addon-search": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.16.0.tgz",
+      "integrity": "sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/addon-web-links": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
+      "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
+    },
+    "node_modules/7zip-bin": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/7zip-bin/-/7zip-bin-5.2.0.tgz",
+      "integrity": "sha512-ukTPVhqG4jNzMro2qA9HSCSSVJN3aN7tlb+hfqYCt3ER0yWroeA2VR38MNrOHLQ/cVj+DaIMad0kFCtWWowh/A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/abbrev": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
+      "integrity": "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/app-builder-bin": {
+      "version": "5.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-5.0.0-alpha.12.tgz",
+      "integrity": "sha512-j87o0j6LqPL3QRr8yid6c+Tt5gC7xNfYo6uQIQkorAC6MpeayVMZrEDzKmJJ/Hlv7EnOQpaRm53k6ktDYZyB6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/app-builder-lib": {
+      "version": "26.8.1",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-26.8.1.tgz",
+      "integrity": "sha512-p0Im/Dx5C4tmz8QEE1Yn4MkuPC8PrnlRneMhWJj7BBXQfNTJUshM/bp3lusdEsDbvvfJZpXWnYesgSLvwtM2Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@develar/schema-utils": "~2.6.5",
+        "@electron/asar": "3.4.1",
+        "@electron/fuses": "^1.8.0",
+        "@electron/get": "^3.0.0",
+        "@electron/notarize": "2.5.0",
+        "@electron/osx-sign": "1.3.3",
+        "@electron/rebuild": "^4.0.3",
+        "@electron/universal": "2.0.3",
+        "@malept/flatpak-bundler": "^0.4.0",
+        "@types/fs-extra": "9.0.13",
+        "async-exit-hook": "^2.0.1",
+        "builder-util": "26.8.1",
+        "builder-util-runtime": "9.5.1",
+        "chromium-pickle-js": "^0.2.0",
+        "ci-info": "4.3.1",
+        "debug": "^4.3.4",
+        "dotenv": "^16.4.5",
+        "dotenv-expand": "^11.0.6",
+        "ejs": "^3.1.8",
+        "electron-publish": "26.8.1",
+        "fs-extra": "^10.1.0",
+        "hosted-git-info": "^4.1.0",
+        "isbinaryfile": "^5.0.0",
+        "jiti": "^2.4.2",
+        "js-yaml": "^4.1.0",
+        "json5": "^2.2.3",
+        "lazy-val": "^1.0.5",
+        "minimatch": "^10.0.3",
+        "plist": "3.1.0",
+        "proper-lockfile": "^4.1.2",
+        "resedit": "^1.7.0",
+        "semver": "~7.7.3",
+        "tar": "^7.5.7",
+        "temp-file": "^3.4.0",
+        "tiny-async-pool": "1.3.0",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "dmg-builder": "26.8.1",
+        "electron-builder-squirrel-windows": "26.8.1"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/get": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-3.1.0.tgz",
+      "integrity": "sha512-F+nKc0xW+kVbBRhFzaMgPy3KwmuNTYX1fx6+FxxoSnNgwYX6LD7AKBTWkU0MQ6IBoe7dz069CNkR673sPAgkCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "env-paths": "^2.2.0",
+        "fs-extra": "^8.1.0",
+        "got": "^11.8.5",
+        "progress": "^2.0.3",
+        "semver": "^6.2.0",
+        "sumchecker": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "global-agent": "^3.0.0"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/get/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/get/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/brace-expansion": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/ci-info": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
+      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/fs-extra/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/fs-extra/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/which": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
+      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-exit-hook": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/async-exit-hook/-/async-exit-hook-2.0.1.tgz",
+      "integrity": "sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.42",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.42.tgz",
+      "integrity": "sha512-c/jurFrDLyui7o1J86yLkRu4LMsTYcBohveus7/I2Hzdn9KIP2bdJPTue/lR1KH46enoPbD77GKeSYNdyPoD3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
+      "integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz",
+      "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.38",
+        "caniuse-lite": "^1.0.30001799",
+        "electron-to-chromium": "^1.5.376",
+        "node-releases": "^2.0.48",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/builder-util": {
+      "version": "26.8.1",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-26.8.1.tgz",
+      "integrity": "sha512-pm1lTYbGyc90DHgCDO7eo8Rl4EqKLciayNbZqGziqnH9jrlKe8ZANGdityLZU+pJh16dfzjAx2xQq9McuIPEtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.1.6",
+        "7zip-bin": "~5.2.0",
+        "app-builder-bin": "5.0.0-alpha.12",
+        "builder-util-runtime": "9.5.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.0",
+        "js-yaml": "^4.1.0",
+        "sanitize-filename": "^1.6.3",
+        "source-map-support": "^0.5.19",
+        "stat-mode": "^1.0.0",
+        "temp-file": "^3.4.0",
+        "tiny-async-pool": "1.3.0"
+      }
+    },
+    "node_modules/builder-util-runtime": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.5.1.tgz",
+      "integrity": "sha512-qt41tMfgHTllhResqM5DcnHyDIWNgzHvuY2jDcYP9iaGpkWxTUzV6GQjDeLnlR1/DtdlcsWQbA7sByMpmJFTLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "sax": "^1.2.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/builder-util/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/builder-util/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/builder-util/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/cacache": {
+      "version": "19.0.1",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-19.0.1.tgz",
+      "integrity": "sha512-hdsUxulXCi5STId78vRVYEtDAjq99ICAUktLTeTYsLoTE6Z8dS0c8pWNCxwdrk9YfJeobDZc2Y186hD/5ZQgFQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^4.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^12.0.0",
+        "tar": "^7.4.3",
+        "unique-filename": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/cacache/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/cacache/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/cacache/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacheable-lookup": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.6.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^4.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^6.0.1",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001800",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001800.tgz",
+      "integrity": "sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chromium-pickle-js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz",
+      "integrity": "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ci-info": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/compare-version": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/compare-version/-/compare-version-0.1.2.tgz",
+      "integrity": "sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.3.tgz",
+      "integrity": "sha512-ihjs0E2SxvDgq/MK418hX6YycQgKhsqxpbZuZbHo0yKfqDWdymWMjWYIpCIzqDDLLKClHlXev8whW/8WXmJ0BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "4.1.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.8.4",
+        "supports-color": "8.1.1",
+        "tree-kill": "1.2.2",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/crc": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
+      "integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.1.0"
+      }
+    },
+    "node_modules/cross-dirname": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cross-dirname/-/cross-dirname-0.1.0.tgz",
+      "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/decompress-response/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/dir-compare": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.2.0.tgz",
+      "integrity": "sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^3.0.5",
+        "p-limit": "^3.1.0 "
+      }
+    },
+    "node_modules/dmg-builder": {
+      "version": "26.8.1",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.8.1.tgz",
+      "integrity": "sha512-glMJgnTreo8CFINujtAhCgN96QAqApDMZ8Vl1r8f0QT8QprvC1UCltV4CcWj20YoIyLZx6IUskaJZ0NV8fokcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-builder-lib": "26.8.1",
+        "builder-util": "26.8.1",
+        "fs-extra": "^10.1.0",
+        "iconv-lite": "^0.6.2",
+        "js-yaml": "^4.1.0"
+      },
+      "optionalDependencies": {
+        "dmg-license": "^1.0.11"
+      }
+    },
+    "node_modules/dmg-builder/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dmg-builder/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/dmg-builder/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/dmg-license": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/dmg-license/-/dmg-license-1.0.11.tgz",
+      "integrity": "sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "@types/plist": "^3.0.1",
+        "@types/verror": "^1.10.3",
+        "ajv": "^6.10.0",
+        "crc": "^3.8.0",
+        "iconv-corefoundation": "^1.1.7",
+        "plist": "^3.0.4",
+        "smart-buffer": "^4.0.2",
+        "verror": "^1.10.0"
+      },
+      "bin": {
+        "dmg-license": "bin/dmg-license.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dompurify": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+      "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
+      "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dotenv": "^16.4.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron": {
+      "version": "40.8.5",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-40.8.5.tgz",
+      "integrity": "sha512-pgTY/VPQKaiU4sTjfU96iyxCXrFm4htVPCMRT4b7q9ijNTRgtLmLvcmzp2G4e7xDrq9p7OLHSmu1rBKFf6Y1/A==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/get": "^2.0.0",
+        "@types/node": "^24.9.0",
+        "extract-zip": "^2.0.1"
+      },
+      "bin": {
+        "electron": "cli.js"
+      },
+      "engines": {
+        "node": ">= 12.20.55"
+      }
+    },
+    "node_modules/electron-builder": {
+      "version": "26.8.1",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-26.8.1.tgz",
+      "integrity": "sha512-uWhx1r74NGpCagG0ULs/P9Nqv2nsoo+7eo4fLUOB8L8MdWltq9odW/uuLXMFCDGnPafknYLZgjNX0ZIFRzOQAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-builder-lib": "26.8.1",
+        "builder-util": "26.8.1",
+        "builder-util-runtime": "9.5.1",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "dmg-builder": "26.8.1",
+        "fs-extra": "^10.1.0",
+        "lazy-val": "^1.0.5",
+        "simple-update-notifier": "2.0.0",
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "electron-builder": "cli.js",
+        "install-app-deps": "install-app-deps.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/electron-builder-squirrel-windows": {
+      "version": "26.8.1",
+      "resolved": "https://registry.npmjs.org/electron-builder-squirrel-windows/-/electron-builder-squirrel-windows-26.8.1.tgz",
+      "integrity": "sha512-o288fIdgPLHA76eDrFADHPoo7VyGkDCYbLV1GzndaMSAVBoZrGvM9m2IehdcVMzdAZJ2eV9bgyissQXHv5tGzA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "app-builder-lib": "26.8.1",
+        "builder-util": "26.8.1",
+        "electron-winstaller": "5.4.0"
+      }
+    },
+    "node_modules/electron-builder/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/electron-builder/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/electron-builder/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/electron-publish": {
+      "version": "26.8.1",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.8.1.tgz",
+      "integrity": "sha512-q+jrSTIh/Cv4eGZa7oVR+grEJo/FoLMYBAnSL5GCtqwUpr1T+VgKB/dn1pnzxIxqD8S/jP1yilT9VrwCqINR4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/fs-extra": "^9.0.11",
+        "builder-util": "26.8.1",
+        "builder-util-runtime": "9.5.1",
+        "chalk": "^4.1.2",
+        "form-data": "^4.0.5",
+        "fs-extra": "^10.1.0",
+        "lazy-val": "^1.0.5",
+        "mime": "^2.5.2"
+      }
+    },
+    "node_modules/electron-publish/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/electron-publish/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/electron-publish/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.387",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.387.tgz",
+      "integrity": "sha512-TaxwufTFDufvPEoXdhwVrA3UdFWBeWGkYoJ1K8ldF1xe6gKfth6iRNS5lTQ5JPNOHdGQm8PT1QYKUqFLCiUefQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/electron-winstaller": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/electron-winstaller/-/electron-winstaller-5.4.0.tgz",
+      "integrity": "sha512-bO3y10YikuUwUuDUQRM4KfwNkKhnpVO7IPdbsrejwN9/AABJzzTQ4GeHwyzNSrVO+tEH3/Np255a3sVZpZDjvg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@electron/asar": "^3.2.1",
+        "debug": "^4.1.1",
+        "fs-extra": "^7.0.1",
+        "lodash": "^4.17.21",
+        "temp": "^0.9.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@electron/windows-sign": "^1.1.2"
+      }
+    },
+    "node_modules/electron-winstaller/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/electron/node_modules/@types/node": {
+      "version": "24.10.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.13.tgz",
+      "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/electron/node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.3",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.3.tgz",
+      "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.3",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.5.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.5.tgz",
+      "integrity": "sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.1",
+        "synckit": "^0.11.12"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-13.0.0.tgz",
+      "integrity": "sha512-McAc+/Nlvcg4byY/CABGH8kqnefWBj8s3JA2okEtz8ixbECQgU46p0HkTUKa4YS7wvgGceimlc34p1nXqbWqtA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exponential-backoff": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
+      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
+      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.5.tgz",
+      "integrity": "sha512-ct/ckWBV/9Dg3MlvCXsLcSUyoWwv9mCKqlhLNB2DAuXR/NZolSXlQqP5dyy6guWlPXBhodZyZ5lGPQcbQDxrEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^10.2.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/filelist/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/global-agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
+      "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "es6-error": "^4.1.1",
+        "matcher": "^3.0.0",
+        "roarr": "^2.15.3",
+        "semver": "^7.3.2",
+        "serialize-error": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
+    "node_modules/global-agent/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/got": {
+      "version": "11.8.6",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/is": "^4.0.0",
+        "@szmarczak/http-timer": "^4.0.5",
+        "@types/cacheable-request": "^6.0.1",
+        "@types/responselike": "^1.0.0",
+        "cacheable-lookup": "^5.0.3",
+        "cacheable-request": "^7.0.2",
+        "decompress-response": "^6.0.0",
+        "http2-wrapper": "^1.0.0-beta.5.2",
+        "lowercase-keys": "^2.0.0",
+        "p-cancelable": "^2.0.0",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/got?sponsor=1"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http2-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-corefoundation": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz",
+      "integrity": "sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "node-addon-api": "^1.6.3"
+      },
+      "engines": {
+        "node": "^8.11.2 || >=10"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ip-address": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+      "integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isbinaryfile": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.7.tgz",
+      "integrity": "sha512-gnWD14Jh3FzS3CPhF0AxNOJ8CxqeblPTADzI38r0wt8ZyQl5edpy75myt08EG2oKvpyiqSqsx+Wkz9vtkbTqYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "license": "MIT",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/lazy-val": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz",
+      "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
+      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.31.1",
+        "lightningcss-darwin-arm64": "1.31.1",
+        "lightningcss-darwin-x64": "1.31.1",
+        "lightningcss-freebsd-x64": "1.31.1",
+        "lightningcss-linux-arm-gnueabihf": "1.31.1",
+        "lightningcss-linux-arm64-gnu": "1.31.1",
+        "lightningcss-linux-arm64-musl": "1.31.1",
+        "lightningcss-linux-x64-gnu": "1.31.1",
+        "lightningcss-linux-x64-musl": "1.31.1",
+        "lightningcss-win32-arm64-msvc": "1.31.1",
+        "lightningcss-win32-x64-msvc": "1.31.1"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
+      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/make-fetch-happen": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-14.0.3.tgz",
+      "integrity": "sha512-QMjGbFTP0blj97EeidG5hk/QhKQ3T4ICckQGLgz38QF7Vgbk6e6FTARN8KhKxyBbWn8R0HU+bnw8aSoFPD4qtQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/agent": "^3.0.0",
+        "cacache": "^19.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-2.0.1.tgz",
+      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-fetch": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-4.0.1.tgz",
+      "integrity": "sha512-j7U11C5HXigVuutxebFadoYBbd7VSdZWggSe64NVdvWNBqGAiXPL2QVCehjmw7lY1oF9gOllYbORh+hiNgfPgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/node-abi": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-4.26.0.tgz",
+      "integrity": "sha512-8QwIZqikRvDIkXS2S93LjzhsSPJuIbfaMETWH+Bx8oOT9Sa9UsUtBFQlc3gBNd1+QINjaTloitXr1W3dQLi9Iw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/node-abi/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
+      "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-api-version": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/node-api-version/-/node-api-version-0.2.1.tgz",
+      "integrity": "sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node_modules/node-api-version/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-gyp": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-11.5.0.tgz",
+      "integrity": "sha512-ra7Kvlhxn5V9Slyus0ygMa2h+UqExPqUIkfk7Pc8QTLT956JLSy51uWFwHtIYy0vI8cB4BDhc/S03+880My/LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^14.0.3",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.4.3",
+        "tinyglobby": "^0.2.12",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/node-gyp/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
+      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.50",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz",
+      "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/nopt": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^3.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+      "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/pe-library": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/pe-library/-/pe-library-0.4.1.tgz",
+      "integrity": "sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jet2jet"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/plist": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+      "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.8",
+        "base64-js": "^1.5.1",
+        "xmlbuilder": "^15.1.1"
+      },
+      "engines": {
+        "node": ">=10.4.0"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
+      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postject": {
+      "version": "1.0.0-alpha.6",
+      "resolved": "https://registry.npmjs.org/postject/-/postject-1.0.0-alpha.6.tgz",
+      "integrity": "sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "commander": "^9.4.0"
+      },
+      "bin": {
+        "postject": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/postject/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.2.tgz",
+      "integrity": "sha512-8c3mgTe0ASwWAJK+78dpviD+A8EqhndQPUBpNUIPt6+xWlIigCwfN01lWr9MAede4uqXGTEKeQWTvzb3vjia0Q==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
+      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/proc-log": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
+      "integrity": "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/read-binary-file-arch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
+      "integrity": "sha512-BNg9EN3DD3GsDXX7Aa8O4p92sryjkmzYYgmgTAc6CA4uGLEDzFfxOxugu21akOxpcXHiEgsYkC6nPsQvLLLmEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "bin": {
+        "read-binary-file-arch": "cli.js"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resedit": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/resedit/-/resedit-1.7.2.tgz",
+      "integrity": "sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pe-library": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jet2jet"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.6.tgz",
+      "integrity": "sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-alpn": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/responselike": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lowercase-keys": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/roarr": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+      "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "detect-node": "^2.0.4",
+        "globalthis": "^1.0.1",
+        "json-stringify-safe": "^5.0.1",
+        "semver-compare": "^1.0.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.59.0",
+        "@rollup/rollup-android-arm64": "4.59.0",
+        "@rollup/rollup-darwin-arm64": "4.59.0",
+        "@rollup/rollup-darwin-x64": "4.59.0",
+        "@rollup/rollup-freebsd-arm64": "4.59.0",
+        "@rollup/rollup-freebsd-x64": "4.59.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+        "@rollup/rollup-linux-arm64-musl": "4.59.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+        "@rollup/rollup-linux-loong64-musl": "4.59.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-musl": "4.59.0",
+        "@rollup/rollup-openbsd-x64": "4.59.0",
+        "@rollup/rollup-openharmony-arm64": "4.59.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+        "@rollup/rollup-win32-x64-gnu": "4.59.0",
+        "@rollup/rollup-win32-x64-msvc": "4.59.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sanitize-filename": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
+      "integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
+      "dev": true,
+      "license": "WTFPL OR ISC",
+      "dependencies": {
+        "truncate-utf8-bytes": "^1.0.0"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",
+      "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "type-fest": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.4.tgz",
+      "integrity": "sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
+      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.0.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/ssri": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
+      "integrity": "sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/stat-mode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
+      "integrity": "sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sumchecker": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
+      "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "debug": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/synckit": {
+      "version": "0.11.12",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
+      "integrity": "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.9"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.0.tgz",
+      "integrity": "sha512-yYzTZ4++b7fNYxFfpnberEEKu43w44aqDMNM9MHMmcKuCH7lL8jJ4yJ7LGHv7rSwiqM0nkiobF9I6cLlpS2P7Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.19",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.19.tgz",
+      "integrity": "sha512-4LeEWl96twnS2Q7Bz4MGqgazLqO+hJN63GZxXoIqh1T3VweYD997gbU1ItNsQafqqXTXd5WFyFdReLtwvRBNiw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/temp": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz",
+      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mkdirp": "^0.5.1",
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/temp-file": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/temp-file/-/temp-file-3.4.0.tgz",
+      "integrity": "sha512-C5tjlC/HCtVUOi3KWVokd4vHVViOmGjtLwIh4MuzPo/nMYTV/p1urt3RnMz2IWXDdKEGJH3k5+KPxtqRsUYGtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-exit-hook": "^2.0.1",
+        "fs-extra": "^10.0.0"
+      }
+    },
+    "node_modules/temp-file/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/temp-file/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/temp-file/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/tiny-async-pool": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tiny-async-pool/-/tiny-async-pool-1.3.0.tgz",
+      "integrity": "sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^5.5.0"
+      }
+    },
+    "node_modules/tiny-async-pool/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tmp": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/tmp-promise": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tmp-promise/-/tmp-promise-3.0.3.tgz",
+      "integrity": "sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tmp": "^0.2.0"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/truncate-utf8-bytes": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
+      "integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==",
+      "dev": true,
+      "license": "WTFPL",
+      "dependencies": {
+        "utf8-byte-length": "^1.0.1"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.56.0.tgz",
+      "integrity": "sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.56.0",
+        "@typescript-eslint/parser": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unique-filename": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-4.0.0.tgz",
+      "integrity": "sha512-XSnEewXmQ+veP7xX2dS5Q4yZAvO40cBN2MWkJ7D/6sW4Dg6wYBNwM1Vrnz1FhH5AdeLIlUXRI9e28z1YZi71NQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-5.0.0.tgz",
+      "integrity": "sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/utf8-byte-length": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.5.tgz",
+      "integrity": "sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/verror": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
+      "integrity": "sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz",
+      "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/xmlbuilder": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+      "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/web/gui/package.json b/web/gui/package.json
index 1c3a2c35c..660f88b95 100644
--- a/web/gui/package.json
+++ b/web/gui/package.json
@@ -32,6 +32,7 @@
     "dompurify": "^3.3.1",
     "immer": "^10.1.1",
     "lucide-react": "^0.511.0",
+    "marked": "^16.4.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "zustand": "^5.0.5"
diff --git a/web/gui/src/main/index.ts b/web/gui/src/main/index.ts
index a09f51569..77e2c6aef 100644
--- a/web/gui/src/main/index.ts
+++ b/web/gui/src/main/index.ts
@@ -310,6 +310,72 @@ function flushWindow(win: BrowserWindow, timeoutMs = 3000): Promise<void> {
   });
 }
 
+// Shared renderer webPreferences for every BrowserWindow we create.
+const RENDERER_WEB_PREFERENCES: Electron.WebPreferences = {
+  preload: path.join(__dirname, "preload.cjs"),
+  contextIsolation: true,
+  nodeIntegration: false,
+  // Electron's default sandboxed preload loader can't require() relative
+  // files — it'd break our shared/ipc-channels import. contextIsolation
+  // plus nodeIntegration:false is still the real renderer security
+  // boundary; disabling sandbox just lets the preload use full Node.
+  sandbox: false,
+};
+
+// External-link hardening shared by every window: keep in-app navigation on
+// localhost and hand anything else off to the system browser.
+function hardenWindow(win: BrowserWindow): void {
+  win.webContents.on("will-navigate", (event, url) => {
+    const parsed = new URL(url);
+    if (parsed.hostname === "localhost") return;
+    event.preventDefault();
+    shell.openExternal(url);
+  });
+
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: "deny" };
+  });
+}
+
+interface RendererLoadOptions {
+  // Extra query string (with leading `&`) appended to the dev-server loadURL.
+  urlParams?: string;
+  // Extra query entries merged into the built-renderer loadFile query object.
+  fileQuery?: Record<string, string>;
+}
+
+// Dev-server HTTP-probe + loadURL/loadFile fallback shared by every window.
+// Only probes the Vite dev server on an explicit `--dev` launch -- a plain
+// start-web-ui.bat/.sh run is unpackaged too, but should always load the
+// built renderer rather than attempt (and hot-reload from) a dev server.
+function loadRenderer(win: BrowserWindow, options: RendererLoadOptions = {}): Promise<void> {
+  const rendererPath = path.join(__dirname, "..", "..", "renderer", "index.html");
+  const fileQuery = { backendPort: String(BACKEND_PORT), ...options.fileQuery };
+  const loadBuiltRenderer = () => win.loadFile(rendererPath, { query: fileQuery });
+
+  const isDev = devMode && !app.isPackaged;
+  if (!isDev) {
+    loadBuiltRenderer();
+    return Promise.resolve();
+  }
+
+  return new Promise<boolean>((probeResolve) => {
+    const req = http.get(DEV_SERVER_URL, () => probeResolve(true));
+    req.on("error", () => probeResolve(false));
+    req.setTimeout(500, () => {
+      req.destroy();
+      probeResolve(false);
+    });
+  }).then((devServerUp) => {
+    if (devServerUp) {
+      win.loadURL(`${DEV_SERVER_URL}?backendPort=${BACKEND_PORT}${options.urlParams ?? ""}`);
+    } else {
+      loadBuiltRenderer();
+    }
+  });
+}
+
 function createWindow(): Promise<BrowserWindow> {
   return new Promise((resolve) => {
     const win = new BrowserWindow({
@@ -320,61 +386,19 @@ function createWindow(): Promise<BrowserWindow> {
       title: "OneTrainer",
       icon: getAppIcon(),
       show: false,
-      webPreferences: {
-        preload: path.join(__dirname, "preload.cjs"),
-        contextIsolation: true,
-        nodeIntegration: false,
-        // Electron's default sandboxed preload loader can't require() relative
-        // files — it'd break our shared/ipc-channels import. contextIsolation
-        // plus nodeIntegration:false is still the real renderer security
-        // boundary; disabling sandbox just lets the preload use full Node.
-        sandbox: false,
-      },
+      webPreferences: RENDERER_WEB_PREFERENCES,
     });
     mainWindow = win;
 
-    const rendererPath = path.join(__dirname, "..", "..", "renderer", "index.html");
-    // Only probe the Vite dev server on an explicit `--dev` launch -- a plain
-    // start-web-ui.bat/.sh run is unpackaged too, but should always load the
-    // built renderer rather than attempt (and hot-reload from) a dev server.
-    const isDev = devMode && !app.isPackaged;
-    if (isDev) {
-      new Promise<boolean>((probeResolve) => {
-        const req = http.get(DEV_SERVER_URL, () => probeResolve(true));
-        req.on("error", () => probeResolve(false));
-        req.setTimeout(500, () => {
-          req.destroy();
-          probeResolve(false);
-        });
-      }).then((devServerUp) => {
-        if (devServerUp) {
-          win.loadURL(`${DEV_SERVER_URL}?backendPort=${BACKEND_PORT}${devMode ? "&dev=1" : ""}`);
-        } else {
-          win.loadFile(rendererPath, {
-            query: { backendPort: String(BACKEND_PORT), ...(devMode ? { dev: "1" } : {}) },
-          });
-        }
-      });
-      if (process.env.OT_DEVTOOLS === "1") {
-        win.webContents.openDevTools();
-      }
-    } else {
-      win.loadFile(rendererPath, {
-        query: { backendPort: String(BACKEND_PORT), ...(devMode ? { dev: "1" } : {}) },
-      });
-    }
-
-    win.webContents.on("will-navigate", (event, url) => {
-      const parsed = new URL(url);
-      if (parsed.hostname === "localhost") return;
-      event.preventDefault();
-      shell.openExternal(url);
+    void loadRenderer(win, {
+      urlParams: devMode ? "&dev=1" : "",
+      fileQuery: devMode ? { dev: "1" } : {},
     });
+    if (devMode && !app.isPackaged && process.env.OT_DEVTOOLS === "1") {
+      win.webContents.openDevTools();
+    }
 
-    win.webContents.setWindowOpenHandler(({ url }) => {
-      shell.openExternal(url);
-      return { action: "deny" };
-    });
+    hardenWindow(win);
 
     const loadTimeout = setTimeout(() => {
       console.warn("[Electron] Main window ready-to-show timeout, resolving anyway");
@@ -464,8 +488,6 @@ function registerIpcHandlers(): void {
   });
 
   ipcMain.handle(IPC_CHANNELS.OPEN_MASK_EDITOR, async (_event, folder?: string) => {
-    const rendererPath = path.join(__dirname, "..", "..", "renderer", "index.html");
-    const isDev = devMode && !app.isPackaged;
     const folderParam = folder ? `&folder=${encodeURIComponent(folder)}` : "";
 
     const editorWindow = new BrowserWindow({
@@ -475,55 +497,15 @@ function registerIpcHandlers(): void {
       minHeight: 800,
       title: "Mask Editor - OneTrainer",
       icon: getAppIcon(),
-      webPreferences: {
-        preload: path.join(__dirname, "preload.cjs"),
-        contextIsolation: true,
-        nodeIntegration: false,
-        sandbox: false,
-      },
+      webPreferences: RENDERER_WEB_PREFERENCES,
     });
 
-    if (isDev) {
-      const devServerUp = await new Promise<boolean>((probeResolve) => {
-        const req = http.get(DEV_SERVER_URL, () => probeResolve(true));
-        req.on("error", () => probeResolve(false));
-        req.setTimeout(500, () => {
-          req.destroy();
-          probeResolve(false);
-        });
-      });
-      if (devServerUp) {
-        editorWindow.loadURL(`${DEV_SERVER_URL}?backendPort=${BACKEND_PORT}&route=mask-editor${folderParam}`);
-      } else {
-        editorWindow.loadFile(rendererPath, {
-          query: {
-            backendPort: String(BACKEND_PORT),
-            route: "mask-editor",
-            ...(folder ? { folder } : {}),
-          },
-        });
-      }
-    } else {
-      editorWindow.loadFile(rendererPath, {
-        query: {
-          backendPort: String(BACKEND_PORT),
-          route: "mask-editor",
-          ...(folder ? { folder } : {}),
-        },
-      });
-    }
-
-    editorWindow.webContents.on("will-navigate", (event, url) => {
-      const parsed = new URL(url);
-      if (parsed.hostname === "localhost") return;
-      event.preventDefault();
-      shell.openExternal(url);
+    await loadRenderer(editorWindow, {
+      urlParams: `&route=mask-editor${folderParam}`,
+      fileQuery: { route: "mask-editor", ...(folder ? { folder } : {}) },
     });
 
-    editorWindow.webContents.setWindowOpenHandler(({ url }) => {
-      shell.openExternal(url);
-      return { action: "deny" };
-    });
+    hardenWindow(editorWindow);
 
     return true;
   });
diff --git a/web/gui/src/renderer/api/configApi.ts b/web/gui/src/renderer/api/configApi.ts
index 70cbfaf24..f96e75ddf 100644
--- a/web/gui/src/renderer/api/configApi.ts
+++ b/web/gui/src/renderer/api/configApi.ts
@@ -12,18 +12,6 @@ export interface PresetInfo {
   is_builtin: boolean;
 }
 
-export interface FieldMetadata {
-  type: string;
-  default: unknown;
-  nullable: boolean;
-  enum_values?: string[];
-  min?: number;
-  max?: number;
-  description?: string;
-}
-
-export type ConfigSchema = Record<string, FieldMetadata>;
-
 export interface OptimizerParamDetail {
   title: string;
   tooltip: string;
@@ -54,8 +42,6 @@ export const configApi = {
 
   getDefaults: () => request<TrainConfig>("/config/defaults"),
 
-  getSchema: () => request<{ fields: ConfigSchema }>("/config/schema").then((r) => r.fields),
-
   exportConfig: () => request<TrainConfig>("/config/export", { method: "POST" }),
 
   changeOptimizer: (optimizer: string) =>
diff --git a/web/gui/src/renderer/components/ErrorBoundary.tsx b/web/gui/src/renderer/components/ErrorBoundary.tsx
index cd8a80913..cfdc85b3f 100644
--- a/web/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/web/gui/src/renderer/components/ErrorBoundary.tsx
@@ -2,23 +2,8 @@ import React, { Component, type ErrorInfo, type ReactNode } from "react";
 
 import { ERROR_500, ON_SURFACE_DARK, SURFACE_RAISED_DARK, SURFACE_SUNKEN_DARK } from "../../shared/brandColors";
 
-export interface FallbackProps {
-  error: Error;
-  resetErrorBoundary: () => void;
-}
-
 interface Props {
   children: ReactNode;
-  /**
-   * Static fallback UI. Does NOT receive the reset function — the user cannot
-   * trigger a reset from this element. Prefer `fallbackRender` instead, which
-   * passes `{ error, resetErrorBoundary }` to the callback.
-   */
-  fallback?: ReactNode;
-  /** Render prop for fallback UI that receives the error and a reset function. */
-  fallbackRender?: (props: FallbackProps) => ReactNode;
-  /** Called after the boundary resets and children are about to remount. Use for app-level state cleanup. */
-  onReset?: () => void;
 }
 
 interface State {
@@ -43,29 +28,13 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   resetErrorBoundary = (): void => {
-    this.setState(
-      (prev) => ({ hasError: false, error: null, resetCount: prev.resetCount + 1 }),
-      () => {
-        this.props.onReset?.();
-      },
-    );
+    this.setState((prev) => ({ hasError: false, error: null, resetCount: prev.resetCount + 1 }));
   };
 
   render(): ReactNode {
     if (this.state.hasError) {
       const error = this.state.error;
 
-      if (this.props.fallbackRender && error) {
-        return this.props.fallbackRender({
-          error,
-          resetErrorBoundary: this.resetErrorBoundary,
-        });
-      }
-
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
       return (
         <div style={{ padding: "24px", textAlign: "center" }}>
           <h2 style={{ color: `var(--color-error-500, ${ERROR_500})`, margin: "0 0 8px" }}>Something went wrong</h2>
diff --git a/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx b/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx
index eb15a5f6c..51e1c72d4 100644
--- a/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx
+++ b/web/gui/src/renderer/components/modals/ManualSamplingModal.tsx
@@ -1,44 +1,19 @@
 import { useEffect, useRef, useState } from "react";
 
 import { trainingApi } from "@/api/trainingApi";
-import { Button, FormEntry, Select, Toggle } from "@/components/shared";
+import { Button } from "@/components/shared";
 import { useTrainingStore } from "@/store/trainingStore";
-import { NoiseSchedulerValues } from "@/types/generated/enums";
-import { TEXTAREA_FULL } from "@/utils/inputStyles";
 
 import { ModalBase } from "./ModalBase";
+import { DEFAULT_SAMPLE, SampleParamsForm, type SampleState } from "./sampleForm";
 
 export interface ManualSamplingModalProps {
   open: boolean;
   onClose: () => void;
 }
 
-interface ManualSampleState {
-  prompt: string;
-  negative_prompt: string;
-  width: number;
-  height: number;
-  seed: number;
-  random_seed: boolean;
-  diffusion_steps: number;
-  cfg_scale: number;
-  noise_scheduler: string;
-}
-
-const DEFAULT_SAMPLE: ManualSampleState = {
-  prompt: "",
-  negative_prompt: "",
-  width: 512,
-  height: 512,
-  seed: 42,
-  random_seed: false,
-  diffusion_steps: 20,
-  cfg_scale: 7,
-  noise_scheduler: "DDIM",
-};
-
 export function ManualSamplingModal({ open, onClose }: ManualSamplingModalProps) {
-  const [sample, setSample] = useState<ManualSampleState>({ ...DEFAULT_SAMPLE });
+  const [sample, setSample] = useState<SampleState>({ ...DEFAULT_SAMPLE });
   const [isSampling, setIsSampling] = useState(false);
   const [sampleImage, setSampleImage] = useState<string | null>(null);
   const waitingRef = useRef(false);
@@ -51,7 +26,7 @@ export function ManualSamplingModal({ open, onClose }: ManualSamplingModalProps)
     }
   }, [latestSample]);
 
-  const update = <K extends keyof ManualSampleState>(field: K, value: ManualSampleState[K]) => {
+  const update = <K extends keyof SampleState>(field: K, value: SampleState[K]) => {
     setSample((prev) => ({ ...prev, [field]: value }));
   };
 
@@ -78,73 +53,13 @@ export function ManualSamplingModal({ open, onClose }: ManualSamplingModalProps)
 
   return (
     <ModalBase open={open} onClose={onClose} title="Manual Sample" size="xl" closeOnBackdrop={false}>
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-1">
-            <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt</span>
-            <textarea
-              value={sample.prompt}
-              onChange={(e) => update("prompt", e.target.value)}
-              rows={3}
-              className={`${TEXTAREA_FULL} resize-y`}
-              placeholder="Enter prompt..."
-            />
-          </div>
-
-          <div className="flex flex-col gap-1">
-            <span className="text-sm font-medium text-[var(--color-on-surface)]">Negative Prompt</span>
-            <textarea
-              value={sample.negative_prompt}
-              onChange={(e) => update("negative_prompt", e.target.value)}
-              rows={2}
-              className={`${TEXTAREA_FULL} resize-y`}
-              placeholder="Enter negative prompt..."
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <FormEntry label="Width" value={sample.width} onChange={(v) => update("width", Number(v))} type="number" />
-            <FormEntry
-              label="Height"
-              value={sample.height}
-              onChange={(v) => update("height", Number(v))}
-              type="number"
-            />
-            <FormEntry
-              label="Steps"
-              value={sample.diffusion_steps}
-              onChange={(v) => update("diffusion_steps", Number(v))}
-              type="number"
-            />
-            <FormEntry
-              label="CFG Scale"
-              value={sample.cfg_scale}
-              onChange={(v) => update("cfg_scale", Number(v))}
-              type="number"
-            />
-            <Select
-              label="Scheduler"
-              options={[...NoiseSchedulerValues]}
-              value={sample.noise_scheduler}
-              onChange={(v) => update("noise_scheduler", v)}
-            />
-            <FormEntry label="Seed" value={sample.seed} onChange={(v) => update("seed", Number(v))} type="number" />
-            <Toggle label="Random Seed" value={sample.random_seed} onChange={(v) => update("random_seed", v)} />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          <div className="aspect-square bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] flex items-center justify-center overflow-hidden">
-            {sampleImage ? (
-              <img src={sampleImage} alt="Generated sample" className="max-w-full max-h-full object-contain" />
-            ) : (
-              <span className="text-sm text-[var(--color-on-surface-secondary)]">
-                {isSampling ? "Generating..." : "No sample generated yet"}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
+      <SampleParamsForm
+        state={sample}
+        onChange={update}
+        sampleImage={sampleImage}
+        isSampling={isSampling}
+        placeholder="No sample generated yet"
+      />
 
       <div className="flex justify-between mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
         <Button variant="primary" onClick={handleSample} disabled={isSampling}>
diff --git a/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx b/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx
index fc33d0a29..1c9c680ba 100644
--- a/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx
+++ b/web/gui/src/renderer/components/modals/StandaloneSamplingModal.tsx
@@ -1,41 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { type SamplerStatusResponse, samplingApi, type StandaloneSampleRequest } from "@/api/samplingApi";
-import { Button, Card, FormEntry, ProgressBar, Select, Toggle } from "@/components/shared";
-import { NoiseSchedulerValues } from "@/types/generated/enums";
-import { TEXTAREA_FULL } from "@/utils/inputStyles";
+import { Button, Card, ProgressBar } from "@/components/shared";
 
 import { ModalBase } from "./ModalBase";
+import { DEFAULT_SAMPLE, SampleParamsForm, type SampleState } from "./sampleForm";
 
 export interface StandaloneSamplingModalProps {
   open: boolean;
   onClose: () => void;
 }
 
-interface SampleState {
-  prompt: string;
-  negative_prompt: string;
-  width: number;
-  height: number;
-  seed: number;
-  random_seed: boolean;
-  diffusion_steps: number;
-  cfg_scale: number;
-  noise_scheduler: string;
-}
-
-const DEFAULT_SAMPLE: SampleState = {
-  prompt: "",
-  negative_prompt: "",
-  width: 512,
-  height: 512,
-  seed: 42,
-  random_seed: false,
-  diffusion_steps: 20,
-  cfg_scale: 7,
-  noise_scheduler: "DDIM",
-};
-
 type SamplerStatus = SamplerStatusResponse["status"];
 
 const STATUS_LABELS: Record<SamplerStatus, string> = {
@@ -201,100 +176,14 @@ export function StandaloneSamplingModal({ open, onClose }: StandaloneSamplingMod
         </div>
       </Card>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-1">
-            <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt</span>
-            <textarea
-              value={sample.prompt}
-              onChange={(e) => update("prompt", e.target.value)}
-              rows={3}
-              disabled={isBusy}
-              className={`${TEXTAREA_FULL} resize-y`}
-              placeholder="Enter prompt..."
-            />
-          </div>
-
-          <div className="flex flex-col gap-1">
-            <span className="text-sm font-medium text-[var(--color-on-surface)]">Negative Prompt</span>
-            <textarea
-              value={sample.negative_prompt}
-              onChange={(e) => update("negative_prompt", e.target.value)}
-              rows={2}
-              disabled={isBusy}
-              className={`${TEXTAREA_FULL} resize-y`}
-              placeholder="Enter negative prompt..."
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <FormEntry
-              label="Width"
-              value={sample.width}
-              onChange={(v) => update("width", Number(v))}
-              type="number"
-              disabled={isBusy}
-            />
-            <FormEntry
-              label="Height"
-              value={sample.height}
-              onChange={(v) => update("height", Number(v))}
-              type="number"
-              disabled={isBusy}
-            />
-            <FormEntry
-              label="Steps"
-              value={sample.diffusion_steps}
-              onChange={(v) => update("diffusion_steps", Number(v))}
-              type="number"
-              disabled={isBusy}
-            />
-            <FormEntry
-              label="CFG Scale"
-              value={sample.cfg_scale}
-              onChange={(v) => update("cfg_scale", Number(v))}
-              type="number"
-              disabled={isBusy}
-            />
-            <Select
-              label="Scheduler"
-              options={[...NoiseSchedulerValues]}
-              value={sample.noise_scheduler}
-              onChange={(v) => update("noise_scheduler", v)}
-              disabled={isBusy}
-            />
-            <FormEntry
-              label="Seed"
-              value={sample.seed}
-              onChange={(v) => update("seed", Number(v))}
-              type="number"
-              disabled={isBusy}
-            />
-            <Toggle
-              label="Random Seed"
-              value={sample.random_seed}
-              onChange={(v) => update("random_seed", v)}
-              disabled={isBusy}
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          <div className="aspect-square bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] flex items-center justify-center overflow-hidden">
-            {sampleImage ? (
-              <img src={sampleImage} alt="Generated sample" className="max-w-full max-h-full object-contain" />
-            ) : (
-              <span className="text-sm text-[var(--color-on-surface-secondary)]">
-                {isSampling
-                  ? "Generating..."
-                  : modelLoaded
-                    ? "Model ready -- click Generate to sample"
-                    : "Load a model to begin sampling"}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
+      <SampleParamsForm
+        state={sample}
+        onChange={update}
+        sampleImage={sampleImage}
+        isSampling={isSampling}
+        disabled={isBusy}
+        placeholder={modelLoaded ? "Model ready -- click Generate to sample" : "Load a model to begin sampling"}
+      />
 
       <div className="flex flex-col gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
         {isSampling && (
diff --git a/web/gui/src/renderer/components/modals/VideoToolModal.tsx b/web/gui/src/renderer/components/modals/VideoToolModal.tsx
index 38f345472..d3a6a9abb 100644
--- a/web/gui/src/renderer/components/modals/VideoToolModal.tsx
+++ b/web/gui/src/renderer/components/modals/VideoToolModal.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
 
-import { videoToolsApi, type VideoToolStatusResponse } from "@/api/videoToolsApi";
+import { type VideoToolResponse, videoToolsApi, type VideoToolStatusResponse } from "@/api/videoToolsApi";
 import { Button, DirPicker, FilePicker, FormEntry, FormFieldWrapper, Toggle } from "@/components/shared";
 import { INPUT_FULL } from "@/utils/inputStyles";
 
@@ -46,39 +46,24 @@ function StatusBar({ status }: { status: VideoToolStatusResponse | null }) {
   );
 }
 
-function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
+// Shared state + loading/error/handleExtract boilerplate for the two extraction tabs.
+function useExtractRunner(onStatusChange: () => void) {
   const [videoPath, setVideoPath] = useState("");
   const [directory, setDirectory] = useState("");
   const [outputDir, setOutputDir] = useState("");
   const [timeStart, setTimeStart] = useState("00:00:00");
   const [timeEnd, setTimeEnd] = useState("99:99:99");
   const [outputSubdirectories, setOutputSubdirectories] = useState(false);
-  const [splitAtCuts, setSplitAtCuts] = useState(false);
-  const [maxLength, setMaxLength] = useState<number>(3);
-  const [fps, setFps] = useState<number>(24);
   const [removeBorders, setRemoveBorders] = useState(false);
   const [cropVariation, setCropVariation] = useState<number>(0.2);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleExtract = async (batchMode: boolean) => {
+  const run = async (call: () => Promise<VideoToolResponse>) => {
     setLoading(true);
     setError(null);
     try {
-      const result = await videoToolsApi.extractClips({
-        video_path: videoPath,
-        directory,
-        batch_mode: batchMode,
-        output_dir: outputDir,
-        time_start: timeStart,
-        time_end: timeEnd,
-        output_subdirectories: outputSubdirectories,
-        split_at_cuts: splitAtCuts,
-        max_length: maxLength,
-        fps,
-        remove_borders: removeBorders,
-        crop_variation: cropVariation,
-      });
+      const result = await call();
       if (!result.ok) {
         setError(result.error ?? "Unknown error");
       }
@@ -90,21 +75,79 @@ function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
     }
   };
 
+  // Payload fields common to extract-clips and extract-images requests.
+  const sharedPayload = (batchMode: boolean) => ({
+    video_path: videoPath,
+    directory,
+    batch_mode: batchMode,
+    output_dir: outputDir,
+    time_start: timeStart,
+    time_end: timeEnd,
+    output_subdirectories: outputSubdirectories,
+    remove_borders: removeBorders,
+    crop_variation: cropVariation,
+  });
+
+  return {
+    videoPath,
+    setVideoPath,
+    directory,
+    setDirectory,
+    outputDir,
+    setOutputDir,
+    timeStart,
+    setTimeStart,
+    timeEnd,
+    setTimeEnd,
+    outputSubdirectories,
+    setOutputSubdirectories,
+    removeBorders,
+    setRemoveBorders,
+    cropVariation,
+    setCropVariation,
+    loading,
+    error,
+    run,
+    sharedPayload,
+  };
+}
+
+type ExtractRunner = ReturnType<typeof useExtractRunner>;
+
+// Shared scaffold for the two extraction tabs: single-video picker + extract button,
+// time range, directory + extract button, output picker, then tab-specific fields
+// (children) and the borders / crop-variation grid. `itemNoun`/`itemNounPlural` fill
+// the few tooltips that differ between clips and images.
+function ExtractScaffold({
+  runner,
+  itemNoun,
+  itemNounPlural,
+  onExtract,
+  children,
+}: {
+  runner: ExtractRunner;
+  itemNoun: string;
+  itemNounPlural: string;
+  onExtract: (batchMode: boolean) => void;
+  children: ReactNode;
+}) {
+  const { loading, error } = runner;
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-end gap-2">
         <div className="flex-1">
           <FilePicker
             label="Single Video"
-            value={videoPath}
-            onChange={setVideoPath}
+            value={runner.videoPath}
+            onChange={runner.setVideoPath}
             tooltip="Link to single video file to process."
             filters={[
               { name: "Video files", extensions: ["webm", "mkv", "flv", "avi", "mov", "wmv", "mp4", "mpeg", "m4v"] },
             ]}
           />
         </div>
-        <Button variant="secondary" size="sm" onClick={() => handleExtract(false)} loading={loading} disabled={loading}>
+        <Button variant="secondary" size="sm" onClick={() => onExtract(false)} loading={loading} disabled={loading}>
           Extract Single
         </Button>
       </div>
@@ -116,15 +159,15 @@ function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
         <div className="flex gap-2">
           <input
             type="text"
-            value={timeStart}
-            onChange={(e) => setTimeStart(e.target.value)}
+            value={runner.timeStart}
+            onChange={(e) => runner.setTimeStart(e.target.value)}
             className={INPUT_FULL}
             placeholder="00:00:00"
           />
           <input
             type="text"
-            value={timeEnd}
-            onChange={(e) => setTimeEnd(e.target.value)}
+            value={runner.timeEnd}
+            onChange={(e) => runner.setTimeEnd(e.target.value)}
             className={INPUT_FULL}
             placeholder="99:99:99"
           />
@@ -135,28 +178,69 @@ function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
         <div className="flex-1">
           <DirPicker
             label="Directory"
-            value={directory}
-            onChange={setDirectory}
+            value={runner.directory}
+            onChange={runner.setDirectory}
             tooltip="Path to directory with multiple videos to process, including in subdirectories."
           />
         </div>
-        <Button variant="secondary" size="sm" onClick={() => handleExtract(true)} loading={loading} disabled={loading}>
+        <Button variant="secondary" size="sm" onClick={() => onExtract(true)} loading={loading} disabled={loading}>
           Extract Directory
         </Button>
       </div>
 
       <DirPicker
         label="Output"
-        value={outputDir}
-        onChange={setOutputDir}
-        tooltip="Path to folder where extracted clips will be saved."
+        value={runner.outputDir}
+        onChange={runner.setOutputDir}
+        tooltip={`Path to folder where extracted ${itemNounPlural} will be saved.`}
       />
 
+      {children}
+
+      <div className="grid grid-cols-2 gap-4">
+        <Toggle
+          label="Remove Borders"
+          value={runner.removeBorders}
+          onChange={runner.setRemoveBorders}
+          tooltip={`Remove black borders from output ${itemNoun}.`}
+        />
+        <FormEntry
+          label="Crop Variation"
+          value={runner.cropVariation}
+          onChange={(v) => runner.setCropVariation(Number(v))}
+          type="number"
+          tooltip={`Output ${itemNounPlural} will be randomly cropped to +/- the base aspect ratio. Set to 0 to use only base aspect.`}
+        />
+      </div>
+
+      {error && <p className="text-sm text-[var(--color-error-500)]">{error}</p>}
+    </div>
+  );
+}
+
+function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
+  const runner = useExtractRunner(onStatusChange);
+  const [splitAtCuts, setSplitAtCuts] = useState(false);
+  const [maxLength, setMaxLength] = useState<number>(3);
+  const [fps, setFps] = useState<number>(24);
+
+  const handleExtract = (batchMode: boolean) =>
+    runner.run(() =>
+      videoToolsApi.extractClips({
+        ...runner.sharedPayload(batchMode),
+        split_at_cuts: splitAtCuts,
+        max_length: maxLength,
+        fps,
+      }),
+    );
+
+  return (
+    <ExtractScaffold runner={runner} itemNoun="clip" itemNounPlural="clips" onExtract={handleExtract}>
       <div className="grid grid-cols-2 gap-4">
         <Toggle
           label="Output to Subdirectories"
-          value={outputSubdirectories}
-          onChange={setOutputSubdirectories}
+          value={runner.outputSubdirectories}
+          onChange={runner.setOutputSubdirectories}
           tooltip="If enabled, files are saved to subfolders based on filename and input directory."
         />
         <Toggle
@@ -183,136 +267,30 @@ function ExtractClipsTab({ onStatusChange }: { onStatusChange: () => void }) {
           tooltip="FPS to convert output videos to. Set to 0 to keep original rate."
         />
       </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <Toggle
-          label="Remove Borders"
-          value={removeBorders}
-          onChange={setRemoveBorders}
-          tooltip="Remove black borders from output clip."
-        />
-        <FormEntry
-          label="Crop Variation"
-          value={cropVariation}
-          onChange={(v) => setCropVariation(Number(v))}
-          type="number"
-          tooltip="Output clips will be randomly cropped to +/- the base aspect ratio. Set to 0 to use only base aspect."
-        />
-      </div>
-
-      {error && <p className="text-sm text-[var(--color-error-500)]">{error}</p>}
-    </div>
+    </ExtractScaffold>
   );
 }
 
 function ExtractImagesTab({ onStatusChange }: { onStatusChange: () => void }) {
-  const [videoPath, setVideoPath] = useState("");
-  const [directory, setDirectory] = useState("");
-  const [outputDir, setOutputDir] = useState("");
-  const [timeStart, setTimeStart] = useState("00:00:00");
-  const [timeEnd, setTimeEnd] = useState("99:99:99");
-  const [outputSubdirectories, setOutputSubdirectories] = useState(false);
+  const runner = useExtractRunner(onStatusChange);
   const [imagesPerSecond, setImagesPerSecond] = useState<number>(0.5);
   const [blurRemoval, setBlurRemoval] = useState<number>(0.2);
-  const [removeBorders, setRemoveBorders] = useState(false);
-  const [cropVariation, setCropVariation] = useState<number>(0.2);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
-  const handleExtract = async (batchMode: boolean) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await videoToolsApi.extractImages({
-        video_path: videoPath,
-        directory,
-        batch_mode: batchMode,
-        output_dir: outputDir,
-        time_start: timeStart,
-        time_end: timeEnd,
-        output_subdirectories: outputSubdirectories,
+  const handleExtract = (batchMode: boolean) =>
+    runner.run(() =>
+      videoToolsApi.extractImages({
+        ...runner.sharedPayload(batchMode),
         images_per_second: imagesPerSecond,
         blur_removal: blurRemoval,
-        remove_borders: removeBorders,
-        crop_variation: cropVariation,
-      });
-      if (!result.ok) {
-        setError(result.error ?? "Unknown error");
-      }
-      onStatusChange();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Request failed");
-    } finally {
-      setLoading(false);
-    }
-  };
+      }),
+    );
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-end gap-2">
-        <div className="flex-1">
-          <FilePicker
-            label="Single Video"
-            value={videoPath}
-            onChange={setVideoPath}
-            tooltip="Link to single video file to process."
-            filters={[
-              { name: "Video files", extensions: ["webm", "mkv", "flv", "avi", "mov", "wmv", "mp4", "mpeg", "m4v"] },
-            ]}
-          />
-        </div>
-        <Button variant="secondary" size="sm" onClick={() => handleExtract(false)} loading={loading} disabled={loading}>
-          Extract Single
-        </Button>
-      </div>
-
-      <FormFieldWrapper
-        label="Time Range"
-        tooltip="Time range to limit selection for single video. Format: HH:MM:SS, MM:SS, or seconds."
-      >
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={timeStart}
-            onChange={(e) => setTimeStart(e.target.value)}
-            className={INPUT_FULL}
-            placeholder="00:00:00"
-          />
-          <input
-            type="text"
-            value={timeEnd}
-            onChange={(e) => setTimeEnd(e.target.value)}
-            className={INPUT_FULL}
-            placeholder="99:99:99"
-          />
-        </div>
-      </FormFieldWrapper>
-
-      <div className="flex items-end gap-2">
-        <div className="flex-1">
-          <DirPicker
-            label="Directory"
-            value={directory}
-            onChange={setDirectory}
-            tooltip="Path to directory with multiple videos to process, including in subdirectories."
-          />
-        </div>
-        <Button variant="secondary" size="sm" onClick={() => handleExtract(true)} loading={loading} disabled={loading}>
-          Extract Directory
-        </Button>
-      </div>
-
-      <DirPicker
-        label="Output"
-        value={outputDir}
-        onChange={setOutputDir}
-        tooltip="Path to folder where extracted images will be saved."
-      />
-
+    <ExtractScaffold runner={runner} itemNoun="image" itemNounPlural="images" onExtract={handleExtract}>
       <Toggle
         label="Output to Subdirectories"
-        value={outputSubdirectories}
-        onChange={setOutputSubdirectories}
+        value={runner.outputSubdirectories}
+        onChange={runner.setOutputSubdirectories}
         tooltip="If enabled, files are saved to subfolders based on filename and input directory."
       />
 
@@ -332,25 +310,7 @@ function ExtractImagesTab({ onStatusChange }: { onStatusChange: () => void }) {
           tooltip="Threshold for removal of blurry images, relative to all others. At 0.2, the blurriest 20% of frames will not be saved."
         />
       </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <Toggle
-          label="Remove Borders"
-          value={removeBorders}
-          onChange={setRemoveBorders}
-          tooltip="Remove black borders from output image."
-        />
-        <FormEntry
-          label="Crop Variation"
-          value={cropVariation}
-          onChange={(v) => setCropVariation(Number(v))}
-          type="number"
-          tooltip="Output images will be randomly cropped to +/- the base aspect ratio. Set to 0 to use only base aspect."
-        />
-      </div>
-
-      {error && <p className="text-sm text-[var(--color-error-500)]">{error}</p>}
-    </div>
+    </ExtractScaffold>
   );
 }
 
diff --git a/web/gui/src/renderer/components/modals/sampleForm.tsx b/web/gui/src/renderer/components/modals/sampleForm.tsx
new file mode 100644
index 000000000..de72133cc
--- /dev/null
+++ b/web/gui/src/renderer/components/modals/sampleForm.tsx
@@ -0,0 +1,142 @@
+import type { ReactNode } from "react";
+
+import { FormEntry, Select, Toggle } from "@/components/shared";
+import { NoiseSchedulerValues } from "@/types/generated/enums";
+import { TEXTAREA_FULL } from "@/utils/inputStyles";
+
+export interface SampleState {
+  prompt: string;
+  negative_prompt: string;
+  width: number;
+  height: number;
+  seed: number;
+  random_seed: boolean;
+  diffusion_steps: number;
+  cfg_scale: number;
+  noise_scheduler: string;
+}
+
+export const DEFAULT_SAMPLE: SampleState = {
+  prompt: "",
+  negative_prompt: "",
+  width: 512,
+  height: 512,
+  seed: 42,
+  random_seed: false,
+  diffusion_steps: 20,
+  cfg_scale: 7,
+  noise_scheduler: "DDIM",
+};
+
+export type SampleUpdater = <K extends keyof SampleState>(field: K, value: SampleState[K]) => void;
+
+export interface SampleParamsFormProps {
+  state: SampleState;
+  onChange: SampleUpdater;
+  sampleImage: string | null;
+  isSampling: boolean;
+  placeholder: ReactNode;
+  disabled?: boolean;
+}
+
+export function SampleParamsForm({
+  state,
+  onChange,
+  sampleImage,
+  isSampling,
+  placeholder,
+  disabled = false,
+}: SampleParamsFormProps) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-medium text-[var(--color-on-surface)]">Prompt</span>
+          <textarea
+            value={state.prompt}
+            onChange={(e) => onChange("prompt", e.target.value)}
+            rows={3}
+            disabled={disabled}
+            className={`${TEXTAREA_FULL} resize-y`}
+            placeholder="Enter prompt..."
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-medium text-[var(--color-on-surface)]">Negative Prompt</span>
+          <textarea
+            value={state.negative_prompt}
+            onChange={(e) => onChange("negative_prompt", e.target.value)}
+            rows={2}
+            disabled={disabled}
+            className={`${TEXTAREA_FULL} resize-y`}
+            placeholder="Enter negative prompt..."
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <FormEntry
+            label="Width"
+            value={state.width}
+            onChange={(v) => onChange("width", Number(v))}
+            type="number"
+            disabled={disabled}
+          />
+          <FormEntry
+            label="Height"
+            value={state.height}
+            onChange={(v) => onChange("height", Number(v))}
+            type="number"
+            disabled={disabled}
+          />
+          <FormEntry
+            label="Steps"
+            value={state.diffusion_steps}
+            onChange={(v) => onChange("diffusion_steps", Number(v))}
+            type="number"
+            disabled={disabled}
+          />
+          <FormEntry
+            label="CFG Scale"
+            value={state.cfg_scale}
+            onChange={(v) => onChange("cfg_scale", Number(v))}
+            type="number"
+            disabled={disabled}
+          />
+          <Select
+            label="Scheduler"
+            options={[...NoiseSchedulerValues]}
+            value={state.noise_scheduler}
+            onChange={(v) => onChange("noise_scheduler", v)}
+            disabled={disabled}
+          />
+          <FormEntry
+            label="Seed"
+            value={state.seed}
+            onChange={(v) => onChange("seed", Number(v))}
+            type="number"
+            disabled={disabled}
+          />
+          <Toggle
+            label="Random Seed"
+            value={state.random_seed}
+            onChange={(v) => onChange("random_seed", v)}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="aspect-square bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-[var(--radius-sm)] flex items-center justify-center overflow-hidden">
+          {sampleImage ? (
+            <img src={sampleImage} alt="Generated sample" className="max-w-full max-h-full object-contain" />
+          ) : (
+            <span className="text-sm text-[var(--color-on-surface-secondary)]">
+              {isSampling ? "Generating..." : placeholder}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/gui/src/renderer/components/shared/ScalarChart.tsx b/web/gui/src/renderer/components/shared/ScalarChart.tsx
index 61d0e3ad6..23a036a53 100644
--- a/web/gui/src/renderer/components/shared/ScalarChart.tsx
+++ b/web/gui/src/renderer/components/shared/ScalarChart.tsx
@@ -15,6 +15,12 @@ export interface ScalarChartProps {
   lineColor?: string;
   width?: number;
   height?: number;
+  xFormat?: (n: number) => string;
+  xAxisLabel?: string;
+  area?: boolean;
+  yMin?: number;
+  yMax?: number;
+  unit?: string;
 }
 
 export function ScalarChart({
@@ -23,6 +29,12 @@ export function ScalarChart({
   lineColor = DEFAULT_LINE_COLOR,
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT,
+  xFormat = formatStep,
+  xAxisLabel = "step",
+  area = true,
+  yMin: yMinProp,
+  yMax: yMaxProp,
+  unit,
 }: ScalarChartProps) {
   const gradientId = `area-grad-${tag.replace(/[^a-zA-Z0-9]/g, "-")}`;
 
@@ -48,8 +60,8 @@ export function ScalarChart({
   const maxVal = Math.max(...values);
 
   const valRange = maxVal - minVal || 1;
-  const yMin = minVal - valRange * 0.05;
-  const yMax = maxVal + valRange * 0.05;
+  const yMin = yMinProp !== undefined ? yMinProp : minVal - valRange * 0.05;
+  const yMax = yMaxProp !== undefined ? yMaxProp : maxVal + valRange * 0.05;
 
   const stepRange = maxStep - minStep || 1;
 
@@ -81,6 +93,7 @@ export function ScalarChart({
         <h4 className="m-0 font-semibold text-caption text-[var(--color-on-surface)]">{tag}</h4>
         <span className="mono tabular-nums text-xs font-semibold" style={{ color: lineColor }}>
           {formatValue(latest.value)}
+          {unit ? ` ${unit}` : ""}
         </span>
       </div>
       <svg viewBox={`0 0 ${width} ${height}`} width="100%" className="block">
@@ -100,13 +113,17 @@ export function ScalarChart({
           );
         })}
 
-        <defs>
-          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor={lineColor} stopOpacity="0.2" />
-            <stop offset="100%" stopColor={lineColor} stopOpacity="0.02" />
-          </linearGradient>
-        </defs>
-        <path d={areaPath} fill={`url(#${gradientId})`} />
+        {area && (
+          <>
+            <defs>
+              <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={lineColor} stopOpacity="0.2" />
+                <stop offset="100%" stopColor={lineColor} stopOpacity="0.02" />
+              </linearGradient>
+            </defs>
+            <path d={areaPath} fill={`url(#${gradientId})`} />
+          </>
+        )}
 
         <path
           d={linePath}
@@ -130,7 +147,7 @@ export function ScalarChart({
               fontSize="9"
               fontFamily="var(--font-mono)"
             >
-              {formatStep(tick)}
+              {xFormat(tick)}
             </text>
           );
         })}
@@ -161,7 +178,7 @@ export function ScalarChart({
           fontSize="9"
           fontFamily="var(--font-sans)"
         >
-          step
+          {xAxisLabel}
         </text>
 
         <line
diff --git a/web/gui/src/renderer/components/shared/Skeleton.tsx b/web/gui/src/renderer/components/shared/Skeleton.tsx
deleted file mode 100644
index 5c37b905f..000000000
--- a/web/gui/src/renderer/components/shared/Skeleton.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface SkeletonProps {
-  width?: string;
-  height?: string;
-  variant?: "text" | "rectangular" | "circular";
-  count?: number;
-}
-
-export function Skeleton({ width = "100%", height = "1rem", variant = "text", count = 1 }: SkeletonProps) {
-  const radiusClass = variant === "circular" ? "rounded-full" : variant === "text" ? "rounded-[var(--radius-sm)]" : "";
-  return (
-    <div className="flex flex-col gap-2" aria-busy="true" aria-label="Loading">
-      {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className={`skeleton ${radiusClass}`} style={{ width, height }} />
-      ))}
-    </div>
-  );
-}
diff --git a/web/gui/src/renderer/components/shared/index.ts b/web/gui/src/renderer/components/shared/index.ts
index 1d1f4fe3d..fd8b1f5d7 100644
--- a/web/gui/src/renderer/components/shared/index.ts
+++ b/web/gui/src/renderer/components/shared/index.ts
@@ -14,7 +14,6 @@ export { ProgressBar, type ProgressBarProps } from "./ProgressBar";
 export { SchemaField, type SchemaFieldProps } from "./SchemaField";
 export { SectionCard, type SectionCardProps } from "./SectionCard";
 export { Select, type SelectKVOption, type SelectProps } from "./Select";
-export { Skeleton, type SkeletonProps } from "./Skeleton";
 export { SliderEntry, type SliderEntryProps } from "./SliderEntry";
 export { TimeEntry, type TimeEntryProps } from "./TimeEntry";
 export { Toggle, type ToggleProps } from "./Toggle";
diff --git a/web/gui/src/renderer/hooks/useArrayField.ts b/web/gui/src/renderer/hooks/useArrayField.ts
deleted file mode 100644
index 945bbf63f..000000000
--- a/web/gui/src/renderer/hooks/useArrayField.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-import { useConfigField } from "./useConfigField";
-
-interface UseArrayFieldOptions<T> {
-  path: string;
-  createDefault: () => T;
-  prepareClone?: (item: T) => T;
-}
-
-interface UseArrayFieldReturn<T> {
-  items: T[];
-  add: () => void;
-  remove: (index: number) => void;
-  clone: (index: number) => void;
-}
-
-export function useArrayField<T>({
-  path,
-  createDefault,
-  prepareClone,
-}: UseArrayFieldOptions<T>): UseArrayFieldReturn<T> {
-  const [value, setValue] = useConfigField<T[]>(path);
-  const items = useMemo(() => value ?? [], [value]);
-
-  const add = useCallback(() => {
-    setValue([...items, createDefault()]);
-  }, [items, setValue, createDefault]);
-
-  const remove = useCallback(
-    (index: number) => {
-      setValue(items.filter((_, i) => i !== index));
-    },
-    [items, setValue],
-  );
-
-  const clone = useCallback(
-    (index: number) => {
-      const cloned = JSON.parse(JSON.stringify(items[index])) as T;
-      const prepared = prepareClone ? prepareClone(cloned) : cloned;
-      const next = [...items];
-      next.splice(index + 1, 0, prepared);
-      setValue(next);
-    },
-    [items, setValue, prepareClone],
-  );
-
-  return { items, add, remove, clone };
-}
diff --git a/web/gui/src/renderer/pages/PerformancePage.tsx b/web/gui/src/renderer/pages/PerformancePage.tsx
index a189d1f33..8e6d9b0fa 100644
--- a/web/gui/src/renderer/pages/PerformancePage.tsx
+++ b/web/gui/src/renderer/pages/PerformancePage.tsx
@@ -1,8 +1,8 @@
-import { memo, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
+import { ScalarChart } from "@/components/shared/ScalarChart";
 import { useReconnectingWebSocket } from "@/hooks/useReconnectingWebSocket";
 import { useUiStore } from "@/store/uiStore";
-import { formatValue, generateTicks } from "@/utils/chartUtils";
 
 interface GpuMetrics {
   index: number;
@@ -28,15 +28,6 @@ interface TimestampedMetrics extends MetricsSnapshot {
 
 const MAX_POINTS = 300;
 
-const CHART_WIDTH = 520;
-const CHART_HEIGHT = 260;
-const CHART_PADDING = { top: 24, right: 16, bottom: 36, left: 64 };
-
-const LINE_COLOR = "var(--color-cobalt-600)";
-const GRID_COLOR = "var(--color-border-subtle)";
-const TEXT_COLOR = "var(--color-on-surface-secondary)";
-const AXIS_COLOR = "var(--color-on-surface-secondary)";
-
 const GPU_COLORS = [
   "var(--color-cobalt-600)",
   "var(--color-azure-500)",
@@ -99,207 +90,10 @@ function useSystemWebSocket(): UseSystemWebSocketResult {
 }
 
 interface ChartPoint {
-  time: number;
+  step: number;
   value: number;
 }
 
-interface MetricChartProps {
-  title: string;
-  points: ChartPoint[];
-  unit: string;
-  color?: string;
-  area?: boolean;
-  yMax?: number;
-  yMin?: number;
-}
-
-const MetricChart = memo(function MetricChart({
-  title,
-  points,
-  unit,
-  color = LINE_COLOR,
-  area = false,
-  yMax: fixedYMax,
-  yMin: fixedYMin,
-}: MetricChartProps) {
-  if (points.length === 0) {
-    return (
-      <div className="card card-static p-4">
-        <h4 className="m-0 mb-2 text-caption font-semibold text-[var(--color-on-surface)]">{title}</h4>
-        <div
-          className="flex items-center justify-center text-[var(--color-on-surface-secondary)] text-caption"
-          style={{ height: CHART_HEIGHT }}
-        >
-          Waiting for data...
-        </div>
-      </div>
-    );
-  }
-
-  const times = points.map((p) => p.time);
-  const values = points.map((p) => p.value);
-  const minTime = Math.min(...times);
-  const maxTime = Math.max(...times);
-
-  const rawMinVal = Math.min(...values);
-  const rawMaxVal = Math.max(...values);
-
-  const yMin = fixedYMin !== undefined ? fixedYMin : Math.max(0, rawMinVal - (rawMaxVal - rawMinVal) * 0.05);
-  const yMax = fixedYMax !== undefined ? fixedYMax : rawMaxVal + (rawMaxVal - rawMinVal) * 0.05 || 1;
-
-  const timeRange = maxTime - minTime || 1;
-
-  const plotW = CHART_WIDTH - CHART_PADDING.left - CHART_PADDING.right;
-  const plotH = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
-
-  const xScale = (time: number) => CHART_PADDING.left + ((time - minTime) / timeRange) * plotW;
-  const yScale = (val: number) => CHART_PADDING.top + plotH - ((val - yMin) / (yMax - yMin)) * plotH;
-
-  const pathParts = points.map((p, i) => {
-    const x = xScale(p.time);
-    const y = yScale(p.value);
-    return `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`;
-  });
-  const linePath = pathParts.join(" ");
-
-  const areaPath =
-    `${linePath} L${xScale(points[points.length - 1].time).toFixed(2)},${(CHART_PADDING.top + plotH).toFixed(2)}` +
-    ` L${xScale(points[0].time).toFixed(2)},${(CHART_PADDING.top + plotH).toFixed(2)} Z`;
-
-  const xTicks = generateTicks(0, maxTime - minTime, 5);
-  const yTicks = generateTicks(yMin, yMax, 5);
-
-  const latestValue = points[points.length - 1].value;
-  const gradId = `perf-area-${title.replace(/[^a-zA-Z0-9]/g, "-")}`;
-
-  return (
-    <div className="card card-static p-4">
-      <div className="flex justify-between items-baseline mb-2">
-        <h4 className="m-0 text-caption font-semibold text-[var(--color-on-surface)]">{title}</h4>
-        <span className="mono tabular-nums text-micro font-semibold" style={{ color }}>
-          {formatValue(latestValue)} {unit}
-        </span>
-      </div>
-      <svg
-        viewBox={`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`}
-        width="100%"
-        className="block"
-        role="img"
-        aria-label={`${title} chart`}
-      >
-        <title>{title}</title>
-        {yTicks.map((tick) => {
-          const y = yScale(tick);
-          return (
-            <line
-              key={`yg-${tick}`}
-              x1={CHART_PADDING.left}
-              y1={y}
-              x2={CHART_WIDTH - CHART_PADDING.right}
-              y2={y}
-              stroke={GRID_COLOR}
-              strokeWidth="0.5"
-              strokeDasharray="4,3"
-            />
-          );
-        })}
-
-        {area && (
-          <>
-            <defs>
-              <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor={color} stopOpacity="0.2" />
-                <stop offset="100%" stopColor={color} stopOpacity="0.02" />
-              </linearGradient>
-            </defs>
-            <path d={areaPath} fill={`url(#${gradId})`} />
-          </>
-        )}
-
-        <path d={linePath} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
-
-        {xTicks.map((tick) => {
-          const x = xScale(minTime + tick);
-          if (x < CHART_PADDING.left || x > CHART_WIDTH - CHART_PADDING.right) return null;
-          return (
-            <text
-              key={`xl-${tick}`}
-              x={x}
-              y={CHART_HEIGHT - 6}
-              textAnchor="middle"
-              fill={TEXT_COLOR}
-              fontSize="9"
-              fontFamily="var(--font-mono)"
-            >
-              {formatTime(tick)}
-            </text>
-          );
-        })}
-
-        {yTicks.map((tick) => {
-          const y = yScale(tick);
-          if (y < CHART_PADDING.top || y > CHART_PADDING.top + plotH) return null;
-          return (
-            <text
-              key={`yl-${tick}`}
-              x={CHART_PADDING.left - 6}
-              y={y + 3}
-              textAnchor="end"
-              fill={TEXT_COLOR}
-              fontSize="9"
-              fontFamily="var(--font-mono)"
-            >
-              {formatValue(tick)}
-            </text>
-          );
-        })}
-
-        <text
-          x={CHART_PADDING.left + plotW / 2}
-          y={CHART_HEIGHT - 0}
-          textAnchor="middle"
-          fill={AXIS_COLOR}
-          fontSize="9"
-          fontFamily="var(--font-sans)"
-        >
-          time
-        </text>
-
-        <line
-          x1={CHART_PADDING.left}
-          y1={CHART_PADDING.top}
-          x2={CHART_PADDING.left}
-          y2={CHART_PADDING.top + plotH}
-          stroke={AXIS_COLOR}
-          strokeWidth="0.5"
-          opacity="0.5"
-        />
-        <line
-          x1={CHART_PADDING.left}
-          y1={CHART_PADDING.top + plotH}
-          x2={CHART_WIDTH - CHART_PADDING.right}
-          y2={CHART_PADDING.top + plotH}
-          stroke={AXIS_COLOR}
-          strokeWidth="0.5"
-          opacity="0.5"
-        />
-
-        <text
-          x={CHART_WIDTH - CHART_PADDING.right}
-          y={CHART_PADDING.top - 8}
-          textAnchor="end"
-          fill={TEXT_COLOR}
-          fontSize="8"
-          fontFamily="var(--font-mono)"
-          opacity="0.6"
-        >
-          {points.length} pts
-        </text>
-      </svg>
-    </div>
-  );
-});
-
 interface StatCardProps {
   label: string;
   value: string;
@@ -338,7 +132,7 @@ function extractTimeSeries(
   for (const m of history) {
     const val = accessor(m);
     if (val !== null && val !== undefined) {
-      points.push({ time: m.timestamp - startTime, value: val });
+      points.push({ step: m.timestamp - startTime, value: val });
     }
   }
 
@@ -475,16 +269,27 @@ export default function PerformancePage() {
       )}
 
       <div className="grid grid-cols-2 gap-4">
-        <MetricChart title="CPU Usage" points={cpuPoints} unit="%" color="var(--color-info-500)" yMax={100} yMin={0} />
+        <ScalarChart
+          tag="CPU Usage"
+          points={cpuPoints}
+          unit="%"
+          lineColor="var(--color-info-500)"
+          area={false}
+          yMax={100}
+          yMin={0}
+          xFormat={formatTime}
+          xAxisLabel="time"
+        />
 
-        <MetricChart
-          title="RAM Usage"
+        <ScalarChart
+          tag="RAM Usage"
           points={ramPoints}
           unit="GB"
-          color="var(--color-azure-500)"
-          area
+          lineColor="var(--color-azure-500)"
           yMin={0}
           yMax={latest?.ram_total_gb}
+          xFormat={formatTime}
+          xAxisLabel="time"
         />
 
         {Array.from({ length: gpuCount }).flatMap((_, gpuIdx) => {
@@ -495,42 +300,49 @@ export default function PerformancePage() {
           const charts: React.ReactNode[] = [];
 
           charts.push(
-            <MetricChart
+            <ScalarChart
               key={`vram-${gpuIdx}`}
-              title={`VRAM - ${gpuName}`}
+              tag={`VRAM - ${gpuName}`}
               points={series.vram}
               unit="MB"
-              color={color}
-              area
+              lineColor={color}
               yMin={0}
               yMax={gpu?.vram_total_mb}
+              xFormat={formatTime}
+              xAxisLabel="time"
             />,
           );
 
           if (gpu?.utilization !== null) {
             charts.push(
-              <MetricChart
+              <ScalarChart
                 key={`util-${gpuIdx}`}
-                title={`GPU Utilization - ${gpuName}`}
+                tag={`GPU Utilization - ${gpuName}`}
                 points={series.utilization}
                 unit="%"
-                color={color}
+                lineColor={color}
+                area={false}
                 yMax={100}
                 yMin={0}
+                xFormat={formatTime}
+                xAxisLabel="time"
               />,
             );
           }
 
           if (gpu?.temperature !== null) {
             charts.push(
-              <MetricChart
+              <ScalarChart
                 key={`temp-${gpuIdx}`}
-                title={`Temperature - ${gpuName}`}
+                tag={`Temperature - ${gpuName}`}
                 points={series.temperature}
                 unit={"\u00B0C"}
-                color="var(--color-error-500)"
+                lineColor="var(--color-error-500)"
+                area={false}
                 yMin={0}
                 yMax={100}
+                xFormat={formatTime}
+                xAxisLabel="time"
               />,
             );
           }
diff --git a/web/gui/src/renderer/store/trainingStore.ts b/web/gui/src/renderer/store/trainingStore.ts
index b274afd59..402015b3f 100644
--- a/web/gui/src/renderer/store/trainingStore.ts
+++ b/web/gui/src/renderer/store/trainingStore.ts
@@ -36,8 +36,6 @@ interface TrainingState {
   setError: (error: string | null) => void;
   setStatusText: (text: string) => void;
   addSampleUrl: (url: string) => void;
-  clearSamples: () => void;
-  reset: () => void;
 
   fetchStatus: () => Promise<void>;
 
@@ -75,8 +73,6 @@ export const useTrainingStore = create<TrainingState>((set, get) => ({
       const urls = s.sampleUrls.length >= 50 ? [...s.sampleUrls.slice(1), entry] : [...s.sampleUrls, entry];
       return { sampleUrls: urls, latestSample: url, nextSampleId: s.nextSampleId + 1 };
     }),
-  clearSamples: () => set({ sampleUrls: [], latestSample: null }),
-  reset: () => set(INITIAL_STATE),
 
   fetchStatus: async () => {
     try {
diff --git a/web/gui/src/renderer/store/uiSchemaStore.ts b/web/gui/src/renderer/store/uiSchemaStore.ts
index c80b2e97d..b43801d97 100644
--- a/web/gui/src/renderer/store/uiSchemaStore.ts
+++ b/web/gui/src/renderer/store/uiSchemaStore.ts
@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-import type { EnumDef, ModalDef, TabDef, UiSchema } from "@/types/uiSchema";
+import type { UiSchema } from "@/types/uiSchema";
 
 interface UiSchemaState {
   schema: UiSchema | null;
@@ -8,10 +8,6 @@ interface UiSchemaState {
   error: string | null;
 
   loadSchema: () => Promise<void>;
-  getTab: (id: string) => TabDef | undefined;
-  getModal: (id: string) => ModalDef | undefined;
-  getEnum: (name: string) => EnumDef | undefined;
-  getPredicate: (name: string) => string[] | undefined;
 }
 
 function resolveSchemaUrl(): string {
@@ -45,9 +41,4 @@ export const useUiSchemaStore = create<UiSchemaState>((set, get) => ({
       });
     }
   },
-
-  getTab: (id: string) => get().schema?.tabs.find((t) => t.id === id),
-  getModal: (id: string) => get().schema?.modals[id],
-  getEnum: (name: string) => get().schema?.enums[name],
-  getPredicate: (name: string) => get().schema?.predicates[name],
 }));
diff --git a/web/gui/src/renderer/utils/markdown.ts b/web/gui/src/renderer/utils/markdown.ts
index cbe3b6af8..ee45cdcbf 100644
--- a/web/gui/src/renderer/utils/markdown.ts
+++ b/web/gui/src/renderer/utils/markdown.ts
@@ -1,4 +1,7 @@
 import DOMPurify from "dompurify";
+import { marked } from "marked";
+
+marked.setOptions({ gfm: true, breaks: false });
 
 const SANITIZE_CONFIG: DOMPurify.Config = {
   ALLOWED_TAGS: [
@@ -50,227 +53,6 @@ export function sanitizeHtml(dirty: string): string {
   return DOMPurify.sanitize(dirty, SANITIZE_CONFIG as Parameters<typeof DOMPurify.sanitize>[1]);
 }
 
-export function escapeHtml(text: string): string {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-
-export function isSafeHref(uri: string): boolean {
-  // eslint-disable-next-line no-control-regex -- Intentionally strip ASCII control chars (0x00-0x1F) and space to prevent URI obfuscation attacks
-  const normalized = uri.replace(/[\x00-\x20]+/g, "").toLowerCase();
-  return /^https?:\/\//.test(normalized) || /^mailto:/.test(normalized) || normalized.startsWith("#");
-}
-
-export function isSafeSrc(uri: string): boolean {
-  // eslint-disable-next-line no-control-regex -- Intentionally strip ASCII control chars (0x00-0x1F) and space to prevent URI obfuscation attacks
-  const normalized = uri.replace(/[\x00-\x20]+/g, "").toLowerCase();
-  return (
-    /^https?:\/\//.test(normalized) ||
-    /^data:image\/(png|jpeg|jpg|gif|webp|avif|bmp)[;,]/.test(normalized) ||
-    normalized.startsWith("/api/")
-  );
-}
-
-export function inlineMarkdown(line: string): string {
-  const parts = line.split(/(<[^>]+>)/g);
-  let result = parts
-    .map((part) => {
-      if (/^<[^>]+>$/.test(part)) return part;
-      return escapeHtml(part);
-    })
-    .join("");
-
-  result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt: string, url: string) =>
-    isSafeSrc(url) ? `<img src="${url}" alt="${alt}" loading="lazy" />` : "",
-  );
-
-  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text: string, url: string) =>
-    isSafeHref(url) ? `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>` : text,
-  );
-
-  result = result.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
-  result = result.replace(/___(.+?)___/g, "<strong><em>$1</em></strong>");
-
-  result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-  result = result.replace(/__(.+?)__/g, "<strong>$1</strong>");
-
-  result = result.replace(/\*(.+?)\*/g, "<em>$1</em>");
-  result = result.replace(/(?<!\w)_(.+?)_(?!\w)/g, "<em>$1</em>");
-
-  result = result.replace(/~~(.+?)~~/g, "<del>$1</del>");
-
-  result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
-
-  return result;
-}
-
-function isHtmlLine(line: string): boolean {
-  return /^\s*<(?:img|div|p|br|hr|details|summary|table|tr|td|th|thead|tbody|figcaption|figure|picture|source|video|iframe)\b/i.test(
-    line.trim(),
-  );
-}
-
 export function markdownToHtml(md: string): string {
-  const lines = md.split("\n");
-  const html: string[] = [];
-  let i = 0;
-
-  const pushParagraph = (text: string) => {
-    if (text.trim()) {
-      html.push(`<p>${inlineMarkdown(text.trim())}</p>`);
-    }
-  };
-
-  while (i < lines.length) {
-    const line = lines[i];
-
-    if (line.startsWith("```")) {
-      const lang = line.slice(3).trim();
-      const codeLines: string[] = [];
-      i++;
-      while (i < lines.length && !lines[i].startsWith("```")) {
-        codeLines.push(escapeHtml(lines[i]));
-        i++;
-      }
-      i++;
-      const langAttr = lang ? ` class="language-${escapeHtml(lang)}"` : "";
-      html.push(`<pre><code${langAttr}>${codeLines.join("\n")}</code></pre>`);
-      continue;
-    }
-
-    if (isHtmlLine(line)) {
-      const htmlBlock: string[] = [];
-      while (
-        i < lines.length &&
-        (isHtmlLine(lines[i]) || (htmlBlock.length > 0 && lines[i].trim() !== "" && !lines[i].startsWith("#")))
-      ) {
-        htmlBlock.push(lines[i]);
-        i++;
-        if (htmlBlock.length > 1 && /^\s*<\//.test(lines[i - 1])) break;
-      }
-      html.push(htmlBlock.join("\n"));
-      continue;
-    }
-
-    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
-    if (headingMatch) {
-      const level = headingMatch[1].length;
-      html.push(`<h${level}>${inlineMarkdown(headingMatch[2])}</h${level}>`);
-      i++;
-      continue;
-    }
-
-    if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
-      html.push("<hr />");
-      i++;
-      continue;
-    }
-
-    if (line.trim().startsWith("|") && line.trim().endsWith("|")) {
-      const tableRows: string[][] = [];
-      let hasHeader = false;
-
-      while (i < lines.length && lines[i].trim().startsWith("|") && lines[i].trim().endsWith("|")) {
-        const row = lines[i].trim();
-
-        if (/^\|[\s:]*-{2,}[\s:]*(\|[\s:]*-{2,}[\s:]*)*\|$/.test(row)) {
-          hasHeader = true;
-          i++;
-          continue;
-        }
-
-        const cells = row
-          .slice(1, -1)
-          .split("|")
-          .map((c) => c.trim());
-        tableRows.push(cells);
-        i++;
-      }
-
-      if (tableRows.length > 0) {
-        html.push("<table>");
-        tableRows.forEach((cells, rowIdx) => {
-          const isHeaderRow = hasHeader && rowIdx === 0;
-          const tag = isHeaderRow ? "th" : "td";
-          const rowHtml = cells.map((c) => `<${tag}>${inlineMarkdown(c)}</${tag}>`).join("");
-          if (isHeaderRow) {
-            html.push(`<thead><tr>${rowHtml}</tr></thead><tbody>`);
-          } else {
-            html.push(`<tr>${rowHtml}</tr>`);
-          }
-        });
-        if (hasHeader) {
-          html.push("</tbody>");
-        }
-        html.push("</table>");
-      }
-      continue;
-    }
-
-    if (line.startsWith("> ") || line === ">") {
-      const quoteLines: string[] = [];
-      while (i < lines.length && (lines[i].startsWith("> ") || lines[i] === ">")) {
-        quoteLines.push(lines[i].replace(/^>\s?/, ""));
-        i++;
-      }
-      html.push(`<blockquote>${markdownToHtml(quoteLines.join("\n"))}</blockquote>`);
-      continue;
-    }
-
-    if (/^(\s*)([-*+])\s+/.test(line)) {
-      const listItems: string[] = [];
-      while (i < lines.length && /^(\s*)([-*+])\s+/.test(lines[i])) {
-        const match = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
-        if (match) {
-          listItems.push(inlineMarkdown(match[3]));
-        }
-        i++;
-      }
-      html.push("<ul>");
-      listItems.forEach((item) => html.push(`<li>${item}</li>`));
-      html.push("</ul>");
-      continue;
-    }
-
-    if (/^\s*\d+\.\s+/.test(line)) {
-      const listItems: string[] = [];
-      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
-        const match = lines[i].match(/^\s*\d+\.\s+(.*)$/);
-        if (match) {
-          listItems.push(inlineMarkdown(match[1]));
-        }
-        i++;
-      }
-      html.push("<ol>");
-      listItems.forEach((item) => html.push(`<li>${item}</li>`));
-      html.push("</ol>");
-      continue;
-    }
-
-    if (line.trim() === "") {
-      i++;
-      continue;
-    }
-
-    const paraLines: string[] = [];
-    while (
-      i < lines.length &&
-      lines[i].trim() !== "" &&
-      !lines[i].startsWith("#") &&
-      !lines[i].startsWith("```") &&
-      !lines[i].startsWith("> ") &&
-      !lines[i].startsWith("| ") &&
-      !/^(\s*)([-*+])\s+/.test(lines[i]) &&
-      !/^\s*\d+\.\s+/.test(lines[i]) &&
-      !/^(-{3,}|\*{3,}|_{3,})\s*$/.test(lines[i]) &&
-      !isHtmlLine(lines[i])
-    ) {
-      paraLines.push(lines[i]);
-      i++;
-    }
-    if (paraLines.length > 0) {
-      pushParagraph(paraLines.join(" "));
-    }
-  }
-
-  return html.join("\n");
+  return marked.parse(md, { async: false });
 }
diff --git a/web/gui/src/shared/brandColors.ts b/web/gui/src/shared/brandColors.ts
index 82bd3075b..b442ec649 100644
--- a/web/gui/src/shared/brandColors.ts
+++ b/web/gui/src/shared/brandColors.ts
@@ -1,26 +1,11 @@
 export const COBALT_600 = "#2563EB";
 export const AZURE_500 = "#38BDF8";
-export const NAVY_800 = "#1E3A5F";
-export const SAPPHIRE_700 = "#1D4ED8";
-export const FROST_50 = "#F0F5FF";
 export const SLATE_950 = "#0B1120";
 
-export const SUCCESS_500 = "#2DD4BF";
-export const WARNING_500 = "#FBBF24";
 export const ERROR_500 = "#F87171";
-export const INFO_500 = "#7C8CFF";
 
 export const SURFACE_DARK = SLATE_950;
 export const SURFACE_SUNKEN_DARK = "#080D1A";
 export const SURFACE_RAISED_DARK = "#131B2E";
-export const INPUT_BG_DARK = "#101828";
 
 export const ON_SURFACE_DARK = "#F1F5F9";
-export const ON_SURFACE_SECONDARY_DARK = "#94A3B8";
-
-export const SURFACE_LIGHT = FROST_50;
-export const SURFACE_SUNKEN_LIGHT = "#E8EDF5";
-export const SURFACE_RAISED_LIGHT = "#FFFFFF";
-
-export const ON_SURFACE_LIGHT = "#0F172A";
-export const ON_SURFACE_SECONDARY_LIGHT = "#475569";