refactor(repo-mutex): use effect.ts (#950)

* refactor(repo-mutex): use effect.ts

* refactor(mutext): run with signal to preserve abort reason

.dockerignore

@@ -1,21 +1,19 @@
 **
 
-!turbo.json
 !bun.lock
 !package.json
-!server.ts
 !.gitignore
+!bunfig.toml
 
 !**/package.json
 !**/bun.lock
 !**/tsconfig.json
 !**/vite.config.ts
-!**/react-router.config.ts
-!**/build.ts
 !**/components.json
 
-!src/**
 !app/**
+!apps/agent/**
+!packages/**
 !public/**
 
 # License files and attributions
@@ -26,3 +24,4 @@
 node_modules/**
 dist/**
 .output/**
+app/test/integration/artifacts/**

.env.example

@@ -4,5 +4,6 @@ RESTIC_CACHE_DIR=./data/restic/cache
 ZEROBYTE_REPOSITORIES_DIR=./data/repositories
 ZEROBYTE_VOLUMES_DIR=./data/volumes
 APP_SECRET=<openssl rand -hex 32>
-BASE_URL=http://localhost:300
+BASE_URL=http://*.localhost
+TRUST_PROXY=false
 PORT=3000

.env.test

@@ -1,3 +1,4 @@
 ZEROBYTE_DATABASE_URL=:memory:
 APP_SECRET=8b9acd4456dd5db0a4a3c4f4e1240b2c3ae08bb59690167197425e4a25dd9a69
 BASE_URL=http://localhost:4096
+ENABLE_LOCAL_AGENT=true

.fallowrc.json

@@ -0,0 +1,13 @@
+{
+	"entry": [
+		"app/client.tsx",
+		"app/router.tsx",
+		"app/server.ts",
+		"app/server/plugins/bootstrap.ts",
+		"openapi-ts.config.ts",
+		"scripts/create-test-files.ts",
+		"scripts/patch-api-client.ts"
+	],
+	"ignorePatterns": ["node_modules/**", ".output/**", "**/api-client/**", "**/routeTree.gen.ts", "apps/docs/**"],
+	"ignoreDependencies": ["@tailwindcss/typography", "babel-plugin-react-compiler"]
+}

.github/actions/install-dependencies/action.yml

@@ -1,15 +1,31 @@
 name: Install dependencies
 
 description: Install dependencies
+inputs:
+  workingDirectory:
+    description: "The working directory to install dependencies in"
+    required: false
+    default: "."
 
 runs:
   using: "composite"
   steps:
-    - uses: oven-sh/setup-bun@v2
+    - uses: socketdev/action@937f824ec476dfd164d4a4d9995751427b0be143 # v1
+      with:
+        mode: firewall
+
+    - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2
       name: Install Bun
       with:
-        bun-version: "1.3.6"
+        bun-version: "1.3.14"
+
+    - uses: voidzero-dev/setup-vp@ca1c46663915d6c1042ae23bd39ab85718bfb0fa # v1
+      with:
+        node-version: '24'
+        cache: true
 
     - name: Install dependencies
       shell: bash
-      run: bun install --frozen-lockfile
+      run: |
+        cd ${{ inputs.workingDirectory }}
+        sfw vp install --frozen-lockfile

.github/dependabot.yml

@@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "bun"
-    directory: "/"
-    schedule:
-      interval: "daily"
-    rebase-strategy: 'auto'
-    groups:
-      minor-patch:
-        update-types:
-          - minor
-          - patch
-
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'daily'
-    rebase-strategy: 'auto'

.github/renovate.json

@@ -0,0 +1,19 @@
+{
+	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
+	"extends": ["config:recommended", "helpers:pinGitHubActionDigests"],
+	"enabledManagers": ["bun", "github-actions"],
+	"minimumReleaseAge": "3 days",
+	"rangeStrategy": "bump",
+	"packageRules": [
+		{
+			"matchManagers": ["github-actions"],
+			"matchUpdateTypes": ["digest", "pinDigest"],
+			"minimumReleaseAge": null
+		},
+		{
+			"matchManagers": ["bun"],
+			"matchUpdateTypes": ["minor", "patch"],
+			"groupName": "bun minor and patch dependencies"
+		}
+	]
+}

.github/workflows/checks.yml

@@ -3,8 +3,6 @@ name: Checks
 on:
   workflow_call:
   pull_request:
-    branches:
-      - main
   push:
     branches:
       - main
@@ -12,31 +10,86 @@ on:
 permissions:
   contents: read
 
+concurrency:
+  group: checks-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
 jobs:
-  checks:
+  lint:
-    timeout-minutes: 15
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
-          fetch-depth: 0
+          fetch-depth: 1
 
       - name: Install dependencies
         uses: "./.github/actions/install-dependencies"
 
-      - uses: oxc-project/oxlint-action@latest
+      - name: Run lint
+        shell: bash
+        run: vp lint --type-aware --deny-warnings
+
+  typecheck:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
-          config: .oxlintrc.json
+          fetch-depth: 1
-          deny-warnings: true
+
+      - name: Install dependencies
+        uses: "./.github/actions/install-dependencies"
 
       - name: Run type checks
         shell: bash
         run: bun run tsc
 
-      - name: Run tests
+  test-server:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          fetch-depth: 1
+
+      - name: Install dependencies
+        uses: "./.github/actions/install-dependencies"
+
+      - name: Run server tests
         shell: bash
-        run: bun run test --ci --coverage
+        run: bun run test:server
+
+  test-client:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          fetch-depth: 1
+
+      - name: Install dependencies
+        uses: "./.github/actions/install-dependencies"
+
+      - name: Run client tests
+        shell: bash
+        run: bun run test:client
+
+  build:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          fetch-depth: 1
+
+      - name: Install dependencies
+        uses: "./.github/actions/install-dependencies"
 
       - name: Build project
         shell: bash

.github/workflows/docs-deploy.yml

@@ -0,0 +1,41 @@
+name: Docs deploy
+permissions:
+  contents: read
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/docs/**"
+
+jobs:
+  deploy:
+    name: Deploy docs
+    if: github.event.repository.default_branch == github.ref_name
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+
+      - name: Install dependencies
+        uses: "./.github/actions/install-dependencies"
+
+      - name: Build docs
+        working-directory: apps/docs
+        run: bun run build
+
+      - name: Build and deploy docs
+        uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          workingDirectory: apps/docs
+
+
+
+
+
+

.github/workflows/e2e.yml

@@ -12,7 +12,7 @@ jobs:
     timeout-minutes: 20
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
 
       - name: Install dependencies
         uses: "./.github/actions/install-dependencies"
@@ -26,7 +26,7 @@ jobs:
 
       - name: Cache Playwright Browsers
         id: playwright-cache
-        uses: actions/cache@v5
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
         with:
           path: ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
@@ -46,22 +46,37 @@ jobs:
           mkdir -p data
           mkdir -p playwright/temp
           mkdir -p playwright/data
+          mkdir -p playwright/tinyauth/app-data
+          mkdir -p playwright/tinyauth/caddy-data
           chmod -R 777 playwright/temp
           touch .env.local
           echo "SERVER_IP=localhost" >> .env.local
           echo "ZEROBYTE_DATABASE_URL=./data/zerobyte.db" >> .env.local
           echo "BASE_URL=http://localhost:4096" >> .env.local
+          echo "E2E_TINYAUTH_ORIGIN=https://tinyauth.example.com:5557" >> .env.local
+          echo "TZ=Europe/Zurich" >> .env.local
 
       - name: Start zerobyte-e2e service
         run: bun run start:e2e -- -d
 
+      - name: Check CLI version
+        run: |
+          expected_version=$(docker exec zerobyte printenv APP_VERSION)
+          cli_version=$(docker exec zerobyte bun run --silent cli --version)
+          echo "$cli_version"
+          test "$cli_version" = "$expected_version"
+
       - name: Wait for zerobyte to be ready
         run: |
           timeout 30s bash -c 'until curl -f http://localhost:4096/api/healthcheck; do echo "Waiting for server..." && sleep 2; done'
 
+      - name: Wait for Tinyauth to be ready
+        run: |
+          timeout 30s bash -c 'until curl -skf https://localhost:5557/.well-known/openid-configuration; do echo "Waiting for Tinyauth..." && sleep 2; done'
+
       - name: Print docker logs if failed to start
         if: failure()
-        run: docker logs zerobyte || true
+        run: docker compose logs zerobyte-e2e tinyauth tinyauth-app || true
 
       - name: Make playwright directory writable
         run: sudo chmod 777 playwright/data/zerobyte.db
@@ -72,15 +87,16 @@ jobs:
       - name: Dump container logs in playwright-report folder
         if: always()
         run: |
-          tree playwright
+          tree playwright || true
-          docker logs zerobyte > playwright-report/container-logs.txt || true
+          docker compose logs zerobyte-e2e > playwright-report/container-logs.txt || true
+          docker compose logs tinyauth tinyauth-app > playwright-report/tinyauth-logs.txt || true
 
       - name: Debug - print content of /test-data in container
         if: failure()
         run: |
           docker exec zerobyte /bin/ash -c "ls -la /test-data" || true
 
-      - uses: actions/upload-artifact@v6
+      - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
         if: always()
         with:
           name: playwright-report

.github/workflows/integration.yml

@@ -0,0 +1,35 @@
+name: Integration Tests
+permissions:
+  contents: read
+
+on:
+  workflow_dispatch:
+  workflow_call:
+
+jobs:
+  integration:
+    name: Integration
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          persist-credentials: false
+
+      - name: Install dependencies
+        uses: "./.github/actions/install-dependencies"
+
+      - name: Run integration tests
+        env:
+          SKIP_VOLUME_MOUNT_INTEGRATION_TESTS: "true"
+        run: bun run test:integration
+
+      - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
+        if: failure()
+        with:
+          name: integration-artifacts
+          path: |
+            app/test/integration/artifacts/compose.log
+            app/test/integration/artifacts/docker-output.log
+            app/test/integration/artifacts/runs/**
+          retention-days: 5

.github/workflows/nightly.yml

@@ -6,31 +6,34 @@ on:
   workflow_dispatch:
 
 permissions:
-  packages: write
+  contents: read
 
 jobs:
   build-and-push:
     timeout-minutes: 15
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
 
       - name: Log in to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4
         with:
           driver: cloud
           endpoint: "meienberger/runtipi-builder"
           install: true
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -38,14 +41,14 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6
         with:
           images: ghcr.io/${{ github.repository_owner }}/zerobyte
           tags: |
             type=raw,value=nightly
 
       - name: Push images to GitHub Container Registry
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7
         with:
           context: .
           target: production

.github/workflows/release.yml

@@ -8,16 +8,16 @@ on:
       - "v*.*.*-alpha.*"
 
 permissions:
-  contents: write
+  contents: read
-  packages: write
-  security-events: write
 
 jobs:
   determine-release-type:
     runs-on: ubuntu-latest
+    permissions: {}
     outputs:
       release_type: ${{ steps.set-type.outputs.release_type }}
       tagname: ${{ github.ref_name }}
+      is_minor_release: ${{ steps.set-type.outputs.is_minor_release }}
     steps:
       - name: Set release type
         id: set-type
@@ -31,74 +31,60 @@ jobs:
             echo "release_type=release" >> $GITHUB_OUTPUT
           fi
 
+          if [[ $TAG =~ ^v[0-9]+\.[0-9]+\.0$ ]]; then
+            echo "is_minor_release=true" >> $GITHUB_OUTPUT
+          else
+            echo "is_minor_release=false" >> $GITHUB_OUTPUT
+          fi
+
   checks:
     uses: ./.github/workflows/checks.yml
 
   e2e-tests:
     uses: ./.github/workflows/e2e.yml
 
+  integration-tests:
+    uses: ./.github/workflows/integration.yml
+
   build-images:
+    environment: release
     timeout-minutes: 15
-    needs: [determine-release-type, checks, e2e-tests]
+    needs: [determine-release-type, checks, e2e-tests, integration-tests]
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      security-events: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
           ref: ${{ github.ref }}
 
       - name: Log in to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4
         with:
           driver: cloud
           endpoint: "meienberger/runtipi-builder"
           install: true
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          target: production
-          platforms: linux/amd64
-          push: false
-          load: true
-          tags: local/zerobyte:ci
-          build-args: |
-            APP_VERSION=${{ needs.determine-release-type.outputs.tagname }}
-
-      - name: Scan new image for vulnerabilities
-        if: needs.determine-release-type.outputs.release_type == 'release'
-        uses: anchore/scan-action@v7
-        id: scan
-        with:
-          image: local/zerobyte:ci
-          fail-build: false
-          only-fixed: true
-          severity-cutoff: critical
-
-      - name: upload Anchore scan report
-        if: needs.determine-release-type.outputs.release_type == 'release'
-        uses: github/codeql-action/upload-sarif@v4
-        with:
-          sarif_file: ${{ steps.scan.outputs.sarif }}
-
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6
         with:
           images: ghcr.io/${{ github.repository_owner }}/zerobyte
           tags: |
@@ -110,7 +96,7 @@ jobs:
             latest=${{ needs.determine-release-type.outputs.release_type == 'release' }}
 
       - name: Push images to GitHub Container Registry
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7
         with:
           context: .
           target: production
@@ -125,12 +111,14 @@ jobs:
     runs-on: ubuntu-latest
     needs: [build-images, determine-release-type]
     if: needs.determine-release-type.outputs.release_type == 'release'
+    permissions:
+      contents: write
     outputs:
       id: ${{ steps.create_release.outputs.id }}
     steps:
       - name: Create GitHub release
         id: create_release
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -140,4 +128,13 @@ jobs:
           name: ${{ needs.determine-release-type.outputs.tagname }}
           draft: false
           prerelease: true
-          files: cli/runtipi-cli-*
+
+  request-docs-version-update:
+    uses: ./.github/workflows/request-docs-version-update.yml
+    needs: [publish-release, determine-release-type]
+    if: needs.determine-release-type.outputs.release_type == 'release' && needs.determine-release-type.outputs.is_minor_release == 'true'
+    with:
+      release_tag: ${{ needs.determine-release-type.outputs.tagname }}
+      base_branch: ${{ github.event.repository.default_branch }}
+    secrets:
+      COPILOT_ASSIGNMENT_TOKEN: ${{ secrets.COPILOT_ASSIGNMENT_TOKEN }}

.github/workflows/request-docs-version-update.yml

@@ -0,0 +1,122 @@
+name: Request docs version update
+
+on:
+  workflow_dispatch:
+    inputs:
+      release_tag:
+        description: Minor release tag, for example v0.35.0
+        required: true
+        type: string
+      base_branch:
+        description: Branch Copilot should branch from
+        required: false
+        default: main
+        type: string
+  workflow_call:
+    inputs:
+      release_tag:
+        required: true
+        type: string
+      base_branch:
+        required: false
+        default: main
+        type: string
+    secrets:
+      COPILOT_ASSIGNMENT_TOKEN:
+        required: true
+
+permissions:
+  contents: read
+
+jobs:
+  request-docs-version-update:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create Copilot issue
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
+        with:
+          github-token: ${{ secrets.COPILOT_ASSIGNMENT_TOKEN }}
+          script: |
+            if (!process.env.COPILOT_ASSIGNMENT_TOKEN) {
+              core.setFailed("COPILOT_ASSIGNMENT_TOKEN is required to assign issues to GitHub Copilot.");
+              return;
+            }
+
+            const releaseTag = process.env.RELEASE_TAG;
+            const baseBranch = process.env.BASE_BRANCH;
+            const minorRelease = releaseTag.match(/^(v\d+\.\d+)\.0$/);
+            if (!minorRelease) {
+              core.setFailed(`Docs version updates only run for minor release tags like v0.35.0. Received: ${releaseTag}`);
+              return;
+            }
+
+            const docsVersion = minorRelease[1];
+            const { owner, repo } = context.repo;
+            const targetRepo = `${owner}/${repo}`;
+            const releaseUrl = `https://github.com/${targetRepo}/releases/tag/${releaseTag}`;
+            const title = `Update Docker Compose examples to ${docsVersion}`;
+            const bodyLines = [
+              `A new Zerobyte release was published: ${releaseTag}`,
+              "",
+              `Release: ${releaseUrl}`,
+              "",
+              "Please create a pull request that updates Docker Compose documentation examples to use:",
+              "",
+              "```yaml",
+              `image: ghcr.io/nicotsx/zerobyte:${docsVersion}`,
+              "```",
+              "",
+              "Scope:",
+              "",
+              "- Update Docker image tags in `README.md`.",
+              "- Update Docker image tags in `apps/docs/`.",
+              "- Only update Zerobyte image versions in Docker Compose examples.",
+              "- Do not change unrelated prose, formatting, or code.",
+              "",
+              "Verification:",
+              "",
+              "- Search for stale `ghcr.io/nicotsx/zerobyte:v...` references in `README.md` and `apps/docs/`.",
+              "- Run any formatting or documentation checks that are appropriate for the touched files.",
+            ];
+
+            const issue = await github.rest.issues.create({
+              owner,
+              repo,
+              title,
+              body: bodyLines.join("\n"),
+            });
+
+            await github.rest.issues.update({
+              owner,
+              repo,
+              issue_number: issue.data.number,
+              body: [
+                ...bodyLines,
+                "",
+                "Pull request requirement:",
+                "",
+                `- Include \`Closes #${issue.data.number}\` in the pull request body.`,
+              ].join("\n"),
+            });
+
+            await github.request("POST /repos/{owner}/{repo}/issues/{issue_number}/assignees", {
+              owner,
+              repo,
+              issue_number: issue.data.number,
+              assignees: ["copilot-swe-agent[bot]"],
+              agent_assignment: {
+                target_repo: targetRepo,
+                base_branch: baseBranch,
+                custom_instructions: "Create a focused documentation-only PR for the release version update.",
+                custom_agent: "",
+                model: "",
+              },
+              headers: {
+                accept: "application/vnd.github+json",
+                "X-GitHub-Api-Version": "2022-11-28",
+              },
+            });
+        env:
+          RELEASE_TAG: ${{ inputs.release_tag }}
+          BASE_BRANCH: ${{ inputs.base_branch }}
+          COPILOT_ASSIGNMENT_TOKEN: ${{ secrets.COPILOT_ASSIGNMENT_TOKEN }}

.github/workflows/scorecard.yml

@@ -0,0 +1,41 @@
+name: Scorecard analysis
+on:
+  branch_protection_rule:
+  push:
+    branches: [ "main" ]
+
+permissions: read-all
+
+jobs:
+  analysis:
+    name: Scorecard analysis
+    runs-on: ubuntu-latest
+    if: github.event.repository.default_branch == github.ref_name || github.event_name == 'pull_request'
+    permissions:
+      security-events: write
+      id-token: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+        with:
+          persist-credentials: false
+
+      - name: Run analysis
+        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          publish_results: true
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+
+      - name: Upload to code-scanning
+        uses: github/codeql-action/upload-sarif@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4
+        with:
+          sarif_file: results.sarif

.gitignore

@@ -15,7 +15,7 @@ notes.md
 smb-password.txt
 cache.db
 
-data/
+/data
 
 .env*
 !.env.example
@@ -28,13 +28,25 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 /playwright/.auth/
+/playwright/*.pass
+/playwright/tinyauth/app-data/
+/playwright/tinyauth/caddy-data/
 
 playwright/.auth
 playwright/temp
+playwright/data
 
 .idea/
+.deepsec/
+.codex/
 
 # OpenAPI error logs
 openapi-ts-error-*.log
 .output
 tmp/
+qa-output
+
+.worktrees/
+.turbo
+.superset
+.fallow

.oxfmtrc.json

@@ -1,6 +0,0 @@
-{
-	"$schema": "./node_modules/oxfmt/configuration_schema.json",
-	"printWidth": 120,
-	"useTabs": true,
-	"endOfLine": "lf"
-}

.oxlintrc.json

@@ -1,152 +0,0 @@
-{
-	"$schema": "./node_modules/oxlint/configuration_schema.json",
-	"plugins": ["eslint", "unicorn", "typescript", "oxc", "import", "react", "react-perf", "node", "jsx-a11y"],
-	"categories": {},
-	"rules": {
-		"constructor-super": "warn",
-		"for-direction": "warn",
-		"no-async-promise-executor": "warn",
-		"no-caller": "warn",
-		"no-class-assign": "warn",
-		"no-compare-neg-zero": "warn",
-		"no-cond-assign": "warn",
-		"no-const-assign": "warn",
-		"no-constant-binary-expression": "warn",
-		"no-constant-condition": "warn",
-		"no-control-regex": "warn",
-		"no-debugger": "warn",
-		"no-delete-var": "warn",
-		"no-dupe-class-members": "warn",
-		"no-dupe-else-if": "warn",
-		"no-dupe-keys": "warn",
-		"no-duplicate-case": "warn",
-		"no-empty-character-class": "warn",
-		"no-empty-pattern": "warn",
-		"no-empty-static-block": "warn",
-		"no-eval": "warn",
-		"no-ex-assign": "warn",
-		"no-extra-boolean-cast": "warn",
-		"no-func-assign": "warn",
-		"no-global-assign": "warn",
-		"no-import-assign": "warn",
-		"no-invalid-regexp": "warn",
-		"no-irregular-whitespace": "warn",
-		"no-loss-of-precision": "warn",
-		"no-new-native-nonconstructor": "warn",
-		"no-nonoctal-decimal-escape": "warn",
-		"no-obj-calls": "warn",
-		"no-self-assign": "warn",
-		"no-setter-return": "warn",
-		"no-shadow-restricted-names": "warn",
-		"no-sparse-arrays": "warn",
-		"no-this-before-super": "warn",
-		"no-unassigned-vars": "warn",
-		"no-unsafe-finally": "warn",
-		"no-unsafe-negation": "warn",
-		"no-unsafe-optional-chaining": "warn",
-		"no-unused-expressions": "warn",
-		"no-unused-labels": "warn",
-		"no-unused-private-class-members": "warn",
-		"no-unused-vars": [
-			"warn",
-			{
-				"caughtErrorsIgnorePattern": "^_",
-				"argsIgnorePattern": "^_"
-			}
-		],
-		"no-useless-backreference": "warn",
-		"no-useless-catch": "warn",
-		"no-useless-escape": "warn",
-		"no-useless-rename": "warn",
-		"no-with": "warn",
-		"require-yield": "warn",
-		"use-isnan": "warn",
-		"valid-typeof": "warn",
-		"oxc/bad-array-method-on-arguments": "warn",
-		"oxc/bad-char-at-comparison": "warn",
-		"oxc/bad-comparison-sequence": "warn",
-		"oxc/bad-min-max-func": "warn",
-		"oxc/bad-object-literal-comparison": "warn",
-		"oxc/bad-replace-all-arg": "warn",
-		"oxc/const-comparisons": "warn",
-		"oxc/double-comparisons": "warn",
-		"oxc/erasing-op": "warn",
-		"oxc/missing-throw": "warn",
-		"oxc/number-arg-out-of-range": "warn",
-		"oxc/only-used-in-recursion": "warn",
-		"oxc/uninvoked-array-callback": "warn",
-		"typescript/await-thenable": "warn",
-		"typescript/no-array-delete": "warn",
-		"typescript/no-base-to-string": "warn",
-		"typescript/no-duplicate-enum-values": "warn",
-		"typescript/no-duplicate-type-constituents": "warn",
-		"typescript/no-extra-non-null-assertion": "warn",
-		"typescript/no-floating-promises": "warn",
-		"typescript/no-for-in-array": "warn",
-		"typescript/no-implied-eval": "warn",
-		"typescript/no-meaningless-void-operator": "warn",
-		"typescript/no-misused-new": "warn",
-		"typescript/no-misused-spread": "warn",
-		"typescript/no-non-null-asserted-optional-chain": "warn",
-		"typescript/no-redundant-type-constituents": "warn",
-		"typescript/no-this-alias": "warn",
-		"typescript/no-unnecessary-parameter-property-assignment": "warn",
-		"typescript/no-unsafe-declaration-merging": "warn",
-		"typescript/no-unsafe-unary-minus": "warn",
-		"typescript/no-useless-empty-export": "warn",
-		"typescript/no-wrapper-object-types": "warn",
-		"typescript/prefer-as-const": "warn",
-		"typescript/require-array-sort-compare": "warn",
-		"typescript/restrict-template-expressions": "warn",
-		"typescript/triple-slash-reference": "warn",
-		"typescript/unbound-method": "warn",
-		"unicorn/no-await-in-promise-methods": "warn",
-		"unicorn/no-empty-file": "warn",
-		"unicorn/no-invalid-fetch-options": "warn",
-		"unicorn/no-invalid-remove-event-listener": "warn",
-		"unicorn/no-new-array": "warn",
-		"unicorn/no-single-promise-in-promise-methods": "warn",
-		"unicorn/no-thenable": "warn",
-		"unicorn/no-unnecessary-await": "warn",
-		"unicorn/no-useless-fallback-in-spread": "warn",
-		"unicorn/no-useless-length-check": "warn",
-		"unicorn/no-useless-spread": "warn",
-		"unicorn/prefer-set-size": "warn",
-		"unicorn/prefer-string-starts-ends-with": "warn",
-		"import/no-cycle": "error",
-		"eslint/no-console": ["warn", { "allow": ["warn", "error", "info"] }]
-	},
-	"settings": {
-		"jsx-a11y": {
-			"polymorphicPropName": null,
-			"components": {},
-			"attributes": {}
-		},
-		"next": {
-			"rootDir": []
-		},
-		"react": {
-			"formComponents": [],
-			"linkComponents": [],
-			"version": null
-		},
-		"jsdoc": {
-			"ignorePrivate": false,
-			"ignoreInternal": false,
-			"ignoreReplacesDocs": true,
-			"overrideReplacesDocs": true,
-			"augmentsExtendsReplacesDocs": false,
-			"implementsReplacesDocs": false,
-			"exemptDestructuredRootsFromChecks": false,
-			"tagNamePreference": {}
-		},
-		"vitest": {
-			"typecheck": false
-		}
-	},
-	"env": {
-		"builtin": true
-	},
-	"globals": {},
-	"ignorePatterns": ["**/api-client/**"]
-}

.vite-hooks/pre-commit

@@ -0,0 +1 @@
+vp staged

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"editor.defaultFormatter": "oxc.oxc-vscode"
+}

AGENTS.md

@@ -1,15 +1,30 @@
-# AGENTS.md
-
 ## Important instructions
 
 - Never create migration files manually. Always use the provided command to generate migrations
 - If you realize an automated migration is incorrect, make sure to remove all the associated entries from the `_journal.json` and the newly created files located in `app/drizzle/` before re-generating the migration
-- The dev server is running at http://localhost:3000. Username is `admin` and password is `password`
+- The dev server runs through Portless. Start it with `bun run dev`, then use `portless get zerobyte` to get the current worktree-specific URL. Do not assume a fixed port like `3000` or `4096`. Username is `admin` and password is `password`
+- The repo is https://github.com/nicotsx/zerobyte
+- If you need to run a specific restic command on a repository, you can open and use the dev panel with `Meta+Shift+D`
 
 ## Project Overview
 
 Zerobyte is a backup automation tool built on top of Restic that provides a web interface for scheduling, managing, and monitoring encrypted backups. It supports multiple volume backends (NFS, SMB, WebDAV, SFTP, local directories) and repository backends (S3, Azure, GCS, local, and rclone-based storage).
 
+### Development Server
+
+```bash
+# Start the dev server through Portless
+bun run dev
+
+# Get the current app URL for this worktree
+portless get zerobyte
+
+# Inspect active Portless routes if needed
+portless list
+```
+
+Portless applies git worktree prefixes automatically, so linked worktrees may return URLs like `https://branch-name.zerobyte.localhost`. Use the Portless URL for browser testing and manual verification.
+
 ### Type Checking
 
 ```bash
@@ -24,7 +39,7 @@ bun run tsc
 bun run test
 
 # Run a specific test file
-bunx dotenv-cli -e .env.test -- bun test --preload ./app/test/setup.ts path/to/test.ts
+bunx dotenv-cli -e .env.test -- bunx --bun vitest run --project server path/to/test.ts
 ```
 
 ### Building
@@ -55,8 +70,13 @@ bun run gen:api-client
 
 ```bash
 # Format
-bunx oxfmt format --write <path>
+vp fmt <path> --write
 
 # Lint
 bun run lint
 ```
+
+### Invalidation
+
+The frontend has an automatic invalidation setup which runs after every mutation.
+Do not implement any invalidation logic in the frontend.

Dockerfile

@@ -1,10 +1,8 @@
-ARG BUN_VERSION="1.3.6"
+FROM oven/bun:1.3.14-alpine@sha256:5acc90a93e91ff07bf72aa90a7c9f0fa189765aec90b47bdbf2152d2196383c0 AS base
-
-FROM oven/bun:${BUN_VERSION}-alpine AS base
 
 ARG RESTIC_VERSION="0.18.1"
-ARG RCLONE_VERSION="1.73.0"
+ARG RCLONE_VERSION="1.74.2"
-ARG SHOUTRRR_VERSION="0.13.2"
+ARG SHOUTRRR_VERSION="0.15.1"
 
 ENV VITE_RESTIC_VERSION=${RESTIC_VERSION} \
     VITE_RCLONE_VERSION=${RCLONE_VERSION} \
@@ -12,7 +10,7 @@ ENV VITE_RESTIC_VERSION=${RESTIC_VERSION} \
 
 RUN apk update --no-cache && \
     apk upgrade --no-cache && \
-    apk add --no-cache davfs2=1.6.1-r2 openssh-client fuse3 sshfs tini
+	apk add --no-cache acl attr cifs-utils davfs2=1.6.1-r2 openssh-client fuse3 sshfs tini tzdata
 
 ENTRYPOINT ["/sbin/tini", "-s", "--"]
 
@@ -31,21 +29,30 @@ RUN apk add --no-cache curl bzip2 unzip tar
 
 RUN echo "Building for ${TARGETARCH}"
 RUN if [ "${TARGETARCH}" = "arm64" ]; then \
-	    curl -L -o restic.bz2 "https://github.com/restic/restic/releases/download/v${RESTIC_VERSION}/restic_${RESTIC_VERSION}_linux_arm64.bz2"; \
+	    curl -fL -o restic.bz2 "https://github.com/restic/restic/releases/download/v${RESTIC_VERSION}/restic_${RESTIC_VERSION}_linux_arm64.bz2"; \
-      curl -L -o rclone.zip "https://github.com/rclone/rclone/releases/download/v${RCLONE_VERSION}/rclone-v${RCLONE_VERSION}-linux-arm64.zip"; \
+      curl -fL -o rclone.zip "https://github.com/rclone/rclone/releases/download/v${RCLONE_VERSION}/rclone-v${RCLONE_VERSION}-linux-arm64.zip"; \
       unzip rclone.zip; \
-      curl -L -o shoutrrr.tar.gz "https://github.com/nicholas-fedor/shoutrrr/releases/download/v${SHOUTRRR_VERSION}/shoutrrr_linux_arm64v8_${SHOUTRRR_VERSION}.tar.gz"; \
+      curl -fL -o shoutrrr.tar.gz "https://github.com/nicholas-fedor/shoutrrr/releases/download/v${SHOUTRRR_VERSION}/shoutrrr_linux_arm64v8_${SHOUTRRR_VERSION}.tar.gz"; \
       elif [ "${TARGETARCH}" = "amd64" ]; then \
-      curl -L -o restic.bz2 "https://github.com/restic/restic/releases/download/v${RESTIC_VERSION}/restic_${RESTIC_VERSION}_linux_amd64.bz2"; \
+      curl -fL -o restic.bz2 "https://github.com/restic/restic/releases/download/v${RESTIC_VERSION}/restic_${RESTIC_VERSION}_linux_amd64.bz2"; \
-      curl -L -o rclone.zip "https://github.com/rclone/rclone/releases/download/v${RCLONE_VERSION}/rclone-v${RCLONE_VERSION}-linux-amd64.zip"; \
+      curl -fL -o rclone.zip "https://github.com/rclone/rclone/releases/download/v${RCLONE_VERSION}/rclone-v${RCLONE_VERSION}-linux-amd64.zip"; \
       unzip rclone.zip; \
-      curl -L -o shoutrrr.tar.gz "https://github.com/nicholas-fedor/shoutrrr/releases/download/v$SHOUTRRR_VERSION/shoutrrr_linux_amd64_${SHOUTRRR_VERSION}.tar.gz"; \
+      curl -fL -o shoutrrr.tar.gz "https://github.com/nicholas-fedor/shoutrrr/releases/download/v$SHOUTRRR_VERSION/shoutrrr_linux_amd64_${SHOUTRRR_VERSION}.tar.gz"; \
       fi
 
 RUN bzip2 -d restic.bz2 && chmod +x restic
 RUN mv rclone-v*-linux-*/rclone /deps/rclone && chmod +x /deps/rclone
 RUN tar -xzf shoutrrr.tar.gz && chmod +x shoutrrr
 
+# ------------------------------
+# RUNTIME TOOLS
+# ------------------------------
+FROM base AS runtime-tools
+
+COPY --from=deps /deps/restic /usr/local/bin/restic
+COPY --from=deps /deps/rclone /usr/local/bin/rclone
+COPY --from=deps /deps/shoutrrr /usr/local/bin/shoutrrr
+
 # ------------------------------
 # DEVELOPMENT
 # ------------------------------
@@ -63,8 +70,12 @@ COPY --from=deps /deps/rclone /usr/local/bin/rclone
 COPY --from=deps /deps/shoutrrr /usr/local/bin/shoutrrr
 
 COPY ./package.json ./bun.lock ./
+COPY ./packages/core/package.json ./packages/core/package.json
+COPY ./packages/contracts/package.json ./packages/contracts/package.json
+COPY ./apps/agent/package.json ./apps/agent/package.json
+COPY ./apps/docs/package.json ./apps/docs/package.json
 
-RUN bun install --frozen-lockfile --ignore-scripts
+RUN VITE_GIT_HOOKS=0 bun install --frozen-lockfile --ignore-scripts
 
 COPY . .
 
@@ -84,11 +95,17 @@ ENV PORT=4096
 WORKDIR /app
 
 COPY ./package.json ./bun.lock ./
-RUN bun install --frozen-lockfile
+COPY ./packages/core/package.json ./packages/core/package.json
+COPY ./packages/contracts/package.json ./packages/contracts/package.json
+COPY ./apps/agent/package.json ./apps/agent/package.json
+COPY ./apps/docs/package.json ./apps/docs/package.json
+
+RUN VITE_GIT_HOOKS=0 bun install --frozen-lockfile
 
 COPY . .
 
 RUN bun run build
+RUN bun build apps/agent/src/index.ts --outfile .output/agent/index.mjs --target bun
 
 FROM base AS production
 

README.md

@@ -15,23 +15,33 @@
   </figure>
 </div>
 
+#### Join the community
+
+[![Discord](https://img.shields.io/discord/1466834119873925263?label=discord&logo=discord)](https://discord.gg/XjgVyXrcEH)
+
 > [!WARNING]
-> Zerobyte is still in version 0.x.x and is subject to major changes from version to version. I am developing the core features and collecting feedbacks. Expect bugs! Please open issues or feature requests
+> Zerobyte is still in version 0.x.x and is subject to major changes from version to version. I am developing the core features and collecting feedback. Please open issues for bugs or feature requests.
 
 <p align="center">
 <a href="https://www.buymeacoffee.com/nicotsx" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 </p>
 
-## Intro
+## Introduction
 
 Zerobyte is a backup automation tool that helps you save your data across multiple storage backends. Built on top of Restic, it provides an modern web interface to schedule, manage, and monitor encrypted backups of your remote storage.
 
+## Documentation
+
+The official documentation website is available at [zerobyte.app](https://zerobyte.app).
+
+It contains up-to-date setup guides, configuration reference, and usage documentation for running Zerobyte in production.
+
 ### Features
 
-- &nbsp; **Automated backups** with encryption, compression and retention policies powered by Restic
+- **Automated backups** with encryption, compression, and retention policies, powered by Restic
-- &nbsp; **Flexible scheduling** For automated backup jobs with fine-grained retention policies
+- **Flexible scheduling** for automated backup jobs with fine-grained retention policies
-- &nbsp; **End-to-end encryption** ensuring your data is always protected
+- **End-to-end encryption** will ensure your data is always protected
-- &nbsp; **Multi-protocol support**: Backup from NFS, SMB, WebDAV, SFTP, or local directories
+- **Multi-protocol support** for backup from NFS, SMB, WebDAV, SFTP, or local directories
 
 ## Installation
 
@@ -40,7 +50,7 @@ In order to run Zerobyte, you need to have Docker and Docker Compose installed o
 ```yaml
 services:
   zerobyte:
-    image: ghcr.io/nicotsx/zerobyte:v0.28
+    image: ghcr.io/nicotsx/zerobyte:v0.38
     container_name: zerobyte
     restart: unless-stopped
     cap_add:
@@ -50,7 +60,7 @@ services:
     devices:
       - /dev/fuse:/dev/fuse
     environment:
-      - TZ=Europe/Paris # Set your timezone here
+      - TZ=Europe/Zurich # Set your timezone here
       - BASE_URL=http://localhost:4096 # URL you will use to access Zerobyte
       - APP_SECRET=94bad46...c66e25d5c2b # Generate your own secret with `openssl rand -hex 32`
     volumes:
@@ -59,10 +69,10 @@ services:
 ```
 
 > [!WARNING]
-> It is highly discouraged to run Zerobyte on a server that is accessible from the internet (VPS or home server with port forwarding) If you do, make sure to change the port mapping to "127.0.0.1:4096:4096" and use a secure tunnel (SSH tunnel, Cloudflare Tunnel, etc.) with authentication.
+> It is highly discouraged to run Zerobyte on a server that is accessible from the internet (VPS or home server with port forwarding). If you do, make sure to change the port mapping to "127.0.0.1:4096:4096" and use a secure tunnel (SSH tunnel, Cloudflare Tunnel, etc.) with authentication.
 
 > [!WARNING]
-> Do not try to point `/var/lib/zerobyte` on a network share. You will face permission issues and strong performance degradation.
+> Do not try to point `/var/lib/zerobyte` to a network share. You will face permission issues and strong performance degradation.
 
 > [!NOTE]
 > **TrueNAS Users:** The host path `/var/lib` is ephemeral on TrueNAS and will be reset during system upgrades. Instead of using `/var/lib/zerobyte:/var/lib/zerobyte`, create a dedicated ZFS dataset (e.g., `tank/docker/zerobyte`) and mount it instead:
@@ -87,44 +97,72 @@ Once the container is running, you can access the web interface at `http://<your
 
 Zerobyte can be customized using environment variables. Below are the available options:
 
-### Environment Variables
+### Environment variables
 
-| Variable              | Description                                                                                                                               | Default                |
+| Variable                  | Description                                                                                                                               | Default                |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- |
+| :------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- |
-| `BASE_URL`            | **Required.** The base URL of your Zerobyte instance (e.g., `https://zerobyte.example.com`). See [Authentication](#authentication) below. | (none)                 |
+| `BASE_URL`                | **Required.** The base URL of your Zerobyte instance (e.g., `https://zerobyte.example.com`). See [Authentication](#authentication) below. | (none)                 |
-| `APP_SECRET`          | **Required.** A random secret key (32+ chars) used to encrypt sensitive data in the database. Generate with `openssl rand -hex 32`.       | (none)                 |
+| `APP_SECRET`              | **Required.** A random secret key (32+ chars) used to encrypt sensitive data in the database. Generate with `openssl rand -hex 32`.       | (none)                 |
-| `PORT`                | The port the web interface and API will listen on.                                                                                        | `4096`                 |
+| `APP_SECRET_FILE`         | Path to a file containing `APP_SECRET`, useful with Docker or Kubernetes secrets. Mutually exclusive with `APP_SECRET`.                   | (none)                 |
-| `RESTIC_HOSTNAME`     | The hostname used by Restic when creating snapshots. Automatically detected if a custom hostname is set in Docker.                        | `zerobyte`             |
+| `PORT`                    | The port the web interface and API will listen on.                                                                                        | `4096`                 |
-| `TZ`                  | Timezone for the container (e.g., `Europe/Paris`). **Crucial for accurate backup scheduling.**                                            | `UTC`                  |
+| `RESTIC_HOSTNAME`         | The hostname used by Restic when creating snapshots. Automatically detected if a custom hostname is set in Docker.                        | `zerobyte`             |
-| `TRUSTED_ORIGINS`     | Comma-separated list of extra trusted origins for CORS (e.g., `http://localhost:3000,http://example.com`).                                | (none)                 |
+| `TZ`                      | Timezone for the container (e.g., `Europe/Zurich`). **Crucial for accurate backup scheduling.**                                           | `UTC`                  |
-| `LOG_LEVEL`           | Logging verbosity. Options: `debug`, `info`, `warn`, `error`.                                                                             | `info`                 |
+| `TRUST_PROXY`             | When `true`, trust an existing `X-Forwarded-For` header from your reverse proxy. Leave `false` for direct deployments.                    | `false`                |
-| `SERVER_IDLE_TIMEOUT` | Idle timeout for the server in seconds.                                                                                                   | `60`                   |
+| `TRUSTED_ORIGINS`         | Comma-separated list of extra trusted origins for CORS (e.g., `http://localhost:3000,http://example.com`).                                | (none)                 |
-| `RCLONE_CONFIG_DIR`   | Path to the rclone config directory inside the container. Change this if running as a non-root user.                                      | `/root/.config/rclone` |
+| `WEBHOOK_ALLOWED_ORIGINS` | Comma-separated list of HTTP origins allowed for backup webhooks and outbound HTTP notification destinations.                             | (none)                 |
+| `WEBHOOK_TIMEOUT`         | Timeout for backup webhook requests in seconds.                                                                                           | `60`                   |
+| `LOG_LEVEL`               | Logging verbosity. Options: `debug`, `info`, `warn`, `error`.                                                                             | `info`                 |
+| `SERVER_IDLE_TIMEOUT`     | Idle timeout for the server in seconds.                                                                                                   | `60`                   |
+| `RCLONE_CONFIG_DIR`       | Path to the directory containing `rclone.conf` inside the container. Change this if running as a non-root user.                           | `/root/.config/rclone` |
+| `PROVISIONING_PATH`       | Path to a JSON file with operator-managed repositories and volumes to sync at startup.                                                    | (none)                 |
 
-### Secret References
+### Webhook and notification network policy
 
-For enhanced security, Zerobyte supports dynamic secret resolution for sensitive fields (like passwords, access keys, etc.) in volume and repository configurations. Instead of storing the encrypted secret in the database, you can use one of the following prefixes:
+Backup webhooks and outbound notification destinations that can target arbitrary network hosts are restricted by `WEBHOOK_ALLOWED_ORIGINS`.
 
-- `env://VAR_NAME`: Reads the secret from the environment variable `VAR_NAME`.
+The allowlist matches exact origins only: scheme, host, and port must match. Paths are ignored, so `https://hooks.example.com/backups` allows any path on `https://hooks.example.com`, but it does not allow `http://hooks.example.com`, `https://hooks.example.com:8443`, or `https://other.example.com`.
-- `file://SECRET_NAME`: Reads the secret from `/run/secrets/SECRET_NAME` (standard Docker Secrets path).
 
-**Example:**
+This policy applies to:
-When configuring an S3 repository, you can set the Secret Access Key to `env://S3_SECRET_KEY` and then provide that variable in your `docker-compose.yml`.
 
-### Simplified setup (No remote mounts)
+- backup pre/post webhook URLs
+- Generic HTTP notification URLs
+- Gotify server URLs
+- self-hosted ntfy server URLs
+- custom Shoutrrr URLs that point at generic HTTP or SMTP network targets
 
-If you only need to back up locally mounted folders and don't require remote share mounting capabilities, you can remove the `SYS_ADMIN` capability and FUSE device from your `docker-compose.yml`:
+The public ntfy.sh service and fixed-provider notification services such as Slack, Discord, Pushover, and Telegram do not need `WEBHOOK_ALLOWED_ORIGINS`.
+
+Backup webhooks do not follow redirects. Add the final destination origin to `WEBHOOK_ALLOWED_ORIGINS` and configure that final URL directly.
+
+Webhook headers are stored as plain text and must use one `Key: Value` header per line. `WEBHOOK_TIMEOUT` controls backup pre/post webhook request timeouts; notification delivery uses the underlying provider sender behavior.
+
+### Provisioned resources
+
+Zerobyte can sync operator-managed repositories and volumes from a JSON file at startup. This is useful when you want credentials or connection details to live in deployment-time configuration instead of being entered through the UI.
+
+Provisioned resources:
+
+- appear in the normal repositories and volumes screens
+- can resolve credential fields from environment variables or `/run/secrets/*` during startup sync
+
+The complete provisioning documentation is available at [zerobyte.app/docs/guides/provisioning](https://zerobyte.app/docs/guides/provisioning).
+
+See `examples/provisioned-resources/README.md` for a full example.
+
+### Simplified setup (no remote mounts)
+
+If you only need to back up locally-mounted folders and don't require remote share mounting capabilities, you can remove the `SYS_ADMIN` capability and FUSE device from your `docker-compose.yml`:
 
 ```yaml
 services:
   zerobyte:
-    image: ghcr.io/nicotsx/zerobyte:v0.28
+    image: ghcr.io/nicotsx/zerobyte:v0.38
     container_name: zerobyte
     restart: unless-stopped
     ports:
       - "4096:4096"
     environment:
-      - TZ=Europe/Paris # Set your timezone here
+      - TZ=Europe/Zurich # Set your timezone here
       - BASE_URL=http://localhost:4096 # Change this to your actual URL (use https:// for secure cookies)
       - APP_SECRET=94bad46...c66e25d5c2b # Generate your own secret with `openssl rand -hex 32`
     volumes:
@@ -136,8 +174,8 @@ services:
 **Trade-offs:**
 
 - ✅ Improved security by reducing container capabilities
-- ✅ Support for local directories
+- ✅ Support for local directories as backup sources
-- ✅ Keep support all repository types (local, S3, GCS, Azure, rclone)
+- ✅ Support all repository types, local and remote (S3, GCS, Azure, rclone)
 - ❌ Cannot mount NFS, SMB, WebDAV, or SFTP shares directly from Zerobyte
 
 If you need remote mount capabilities, keep the original configuration with `cap_add: SYS_ADMIN` and `devices: /dev/fuse:/dev/fuse`.
@@ -152,12 +190,12 @@ Zerobyte supports multiple volume backends including NFS, SMB, WebDAV, SFTP, and
 
 To add your first volume, navigate to the "Volumes" section in the web interface and click on "Create volume". Fill in the required details such as volume name, type, and connection settings.
 
-If you want to track a local directory on the same server where Zerobyte is running, you'll first need to mount that directory into the Zerobyte container. You can do this by adding a volume mapping in your `docker-compose.yml` file. For example, to mount `/path/to/your/directory` from the host to `/mydata` in the container, you would add the following line under the `volumes` section:
+If you want to backup a local directory on the same host where Zerobyte is running, you'll first need to mount that directory into the Zerobyte container. You can do this by adding a volume mapping in your `docker-compose.yml` file. For example, to mount `/path/to/your/directory` from the host to `/mydata` in the container, you would add the following line under the `volumes` section:
 
 ```diff
 services:
   zerobyte:
-    image: ghcr.io/nicotsx/zerobyte:v0.28
+    image: ghcr.io/nicotsx/zerobyte:v0.38
     container_name: zerobyte
     restart: unless-stopped
     cap_add:
@@ -167,7 +205,7 @@ services:
     devices:
       - /dev/fuse:/dev/fuse
     environment:
-      - TZ=Europe/Paris
+      - TZ=Europe/Zurich
       - BASE_URL=http://localhost:4096 # URL you will use to access Zerobyte
       - APP_SECRET=94bad46...c66e25d5c2b # Generate your own secret with `openssl rand -hex 32`
     volumes:
@@ -185,17 +223,17 @@ docker compose up -d
 
 Now, when adding a new volume in the Zerobyte web interface, you can select "Directory" as the volume type and search for your mounted path (e.g., `/mydata`) as the source path.
 
-![Preview](https://github.com/nicotsx/zerobyte/blob/main/screenshots/add-volume.png?raw=true)
+![Add a new volume UI](https://github.com/nicotsx/zerobyte/blob/main/screenshots/add-volume.png?raw=true)
 
 ## Creating a repository
 
 A repository is where your backups will be securely stored encrypted. Zerobyte supports multiple storage backends for your backup repositories:
 
-- **Local directories** - Store backups on local disk subfolder of `/var/lib/zerobyte/repositories/` or any other (mounted) path
+- **Local directories**: Store backups on local disk subfolders in `/var/lib/zerobyte/repositories/` or any other (mounted) path
-- **S3-compatible storage** - Amazon S3, MinIO, Wasabi, DigitalOcean Spaces, etc.
+- **S3-compatible storage**: Amazon S3, MinIO, Wasabi, DigitalOcean Spaces, etc.
-- **Google Cloud Storage** - Google's cloud storage service
+- **Google Cloud Storage**: Google's cloud storage service
-- **Azure Blob Storage** - Microsoft Azure storage
+- **Azure Blob Storage**: Microsoft Azure storage
-- **rclone remotes** - 40+ cloud storage providers via rclone (see below)
+- **rclone remotes**: 40+ cloud storage providers via rclone (see below)
 
 Repositories are optimized for storage efficiency and data integrity, leveraging Restic's deduplication and encryption features.
 
@@ -232,7 +270,7 @@ Zerobyte can use [rclone](https://rclone.org/) to support 40+ cloud storage prov
    ```diff
    services:
      zerobyte:
-       image: ghcr.io/nicotsx/zerobyte:v0.28
+       image: ghcr.io/nicotsx/zerobyte:v0.38
        container_name: zerobyte
        restart: unless-stopped
        cap_add:
@@ -242,7 +280,7 @@ Zerobyte can use [rclone](https://rclone.org/) to support 40+ cloud storage prov
        devices:
          - /dev/fuse:/dev/fuse
        environment:
-         - TZ=Europe/Paris
+         - TZ=Europe/Zurich
          - BASE_URL=http://localhost:4096 # URL you will use to access Zerobyte
        volumes:
          - /etc/localtime:/etc/localtime:ro
@@ -250,7 +288,7 @@ Zerobyte can use [rclone](https://rclone.org/) to support 40+ cloud storage prov
    +     - ~/.config/rclone:/root/.config/rclone:ro
    ```
 
-   > **Note for non-root users:** If your container runs as a different user (e.g., TrueNAS apps), mount your config to the appropriate location and set `RCLONE_CONF_DIR`:
+   > **Note for non-root users:** If your container runs as a different user (e.g., TrueNAS apps), mount your config to the appropriate location and set `RCLONE_CONFIG_DIR`:
    >
    > ```yaml
    > environment:
@@ -286,24 +324,30 @@ When creating a backup job, you can specify the following settings:
 After configuring the backup job, save it and Zerobyte will automatically execute the backup according to the defined schedule.
 You can monitor the progress and status of your backup jobs in the "Backups" section of the web interface.
 
-![Preview](https://github.com/nicotsx/zerobyte/blob/main/screenshots/backups-list.png?raw=true)
+![Backups UI](https://github.com/nicotsx/zerobyte/blob/main/screenshots/backups-list.png?raw=true)
 
 ## Restoring data
 
 Zerobyte allows you to easily restore your data from backups. To restore data, navigate to the "Backups" section and select the backup job from which you want to restore data. You can then choose a specific backup snapshot and select the files or directories you wish to restore. The data you select will be restored to their original location.
 
-![Preview](https://github.com/nicotsx/zerobyte/blob/main/screenshots/restoring.png?raw=true)
+![Restore UI](https://github.com/nicotsx/zerobyte/blob/main/screenshots/restoring.png?raw=true)
 
 ## Authentication
 
 Zerobyte uses [better-auth](https://github.com/better-auth/better-auth) for authentication and session management. The authentication system automatically adapts to your deployment scenario:
 
-### Cookie Security
+### Users and roles
 
-- **IP Address / HTTP access**: Set `BASE_URL=http://192.168.1.50:4096` (or your IP). Cookies will use `Secure: false`, allowing immediate login without SSL.
+Zerobyte does not currently provide fine-grained RBAC for backup operations. Authenticated organization members are trusted operators for repositories, volumes, backup schedules, restores, and notification destinations in their organization.
-- **Domain / HTTPS access**: Set `BASE_URL=https://zerobyte.example.com`. Cookies will automatically use `Secure: true` for protected sessions.
 
-### Reverse Proxy Setup
+Organization roles mainly restrict organization-management and instance-management actions. For example, normal members cannot manage members, SSO settings, invitations, registration, or global users, but they can still operate backup resources. Only add users to an organization if you are comfortable with them using the storage, volume, and notification capabilities configured for the instance.
+
+### Cookie security
+
+- **IP Address/HTTP access**: Set `BASE_URL=http://192.168.1.50:4096` (or your IP). Cookies will use `Secure: false`, allowing immediate login without SSL.
+- **Domain/HTTPS access**: Set `BASE_URL=https://zerobyte.example.com`. Cookies will automatically use `Secure: true` for protected sessions.
+
+### Reverse proxy setup
 
 If you're running Zerobyte behind a reverse proxy (Nginx, Traefik, Caddy, etc.):
 
@@ -311,16 +355,18 @@ If you're running Zerobyte behind a reverse proxy (Nginx, Traefik, Caddy, etc.):
 2. The app will automatically enable secure cookies based on the `https://` prefix
 3. Ensure your proxy passes the `X-Forwarded-Proto` header
 
-### Important Notes
+### Important notes
 
 - The `BASE_URL` must start with `https://` for secure cookies to be enabled
 - Local IP addresses (e.g., `http://192.168.x.x`) are **not** treated as secure contexts by browsers, so secure cookies are disabled automatically
+- `TRUSTED_ORIGINS` only allows additional origins for auth-related requests. It does not disable secure cookies or make authenticated HTTP access work when `BASE_URL` is HTTPS.
+- If `BASE_URL` is HTTPS, browsers will only send Zerobyte's auth cookies over HTTPS. Plain HTTP access may still show the login page, but authenticated flows will fail because no session cookie is available.
 
 ## Troubleshooting
 
 For troubleshooting common issues, please refer to the [TROUBLESHOOTING.md](TROUBLESHOOTING.md) file.
 
-## Third-Party Software
+## Third-party software
 
 This project includes the following third-party software components:
 
@@ -341,10 +387,10 @@ Contributions by anyone are welcome! If you find a bug or have a feature request
 
 ## Development (no Docker)
 
-You can run Zerobyte locally during development without Docker:
+After installing Vite+ globally, you can run Zerobyte locally during development without Docker:
 
 ```bash
-bun install
+vp install
 bun run dev
 ```
 
@@ -358,10 +404,10 @@ RESTIC_PASS_FILE=./data/restic.pass
 RESTIC_CACHE_DIR=./data/restic/cache
 ZEROBYTE_REPOSITORIES_DIR=./data/repositories
 ZEROBYTE_VOLUMES_DIR=./data/volumes
-BASE_URL=http://localhost:4096
+BASE_URL=https://*.localhost
 ```
 
 Notes:
 
 - Remote mount backends (NFS/SMB/WebDAV/SFTP) rely on Linux mount tooling and `CAP_SYS_ADMIN`; on macOS they are expected to be unavailable.
-- To actually run backups/repository checks, install `restic` on your machine (e.g. via Homebrew). If `restic` is not installed, the app still starts but backup operations will fail with a clear error.
+- To actually run backups/repository checks, install `restic` on your machine (e.g., via Homebrew). If `restic` is not installed, the app still starts but backup operations will fail with a clear error.

SECURITY.md

@@ -0,0 +1,75 @@
+# Security Policy
+
+Thank you for helping keep Zerobyte and its users secure.
+
+Zerobyte is currently in `0.x`, and releases may include breaking changes between versions. For that reason, security fixes are only guaranteed for the most recent stable release line.
+
+## Supported Versions
+
+| Version                                       | Supported          |
+| --------------------------------------------- | ------------------ |
+| Latest stable `0.x` release                   | :white_check_mark: |
+| Older stable `0.x` releases                   | :x:                |
+| Pre-release builds (`-alpha`, `-beta`, `-rc`) | :x:                |
+| Development snapshots from `main`             | :x:                |
+
+Security fixes are generally released in the latest stable version only. If you are running an older release, you may be asked to upgrade before a fix is provided.
+
+## Reporting a Vulnerability
+
+Please do **not** report security vulnerabilities through public GitHub issues, discussions, or pull requests.
+
+Use one of these private channels instead:
+
+1. Preferred: GitHub private vulnerability reporting
+   https://github.com/nicotsx/zerobyte/security/advisories/new
+2. Alternative: contact the maintainer directly by email if an address is listed in the repository or GitHub profile
+
+When reporting, include as much of the following as you can:
+
+- affected Zerobyte version
+- deployment details, including whether you are using Docker, reverse proxies, or exposed ports
+- clear reproduction steps or a proof of concept
+- impact assessment and what an attacker could do
+- any relevant logs, screenshots, or configuration excerpts with secrets removed
+
+### What to expect
+
+- We aim to acknowledge new reports within 7 days.
+- We aim to provide status updates at least every 7 days while the report is being investigated.
+- If the report is accepted, we will work on a fix, coordinate disclosure, and publish a security advisory when appropriate.
+- If the report is declined, out of scope, or cannot be reproduced, we will explain why when possible.
+
+Please avoid public disclosure until a fix has been released and maintainers have had reasonable time to notify users.
+
+## Trust model baseline
+
+Zerobyte is a self-hosted operator tool. Treat any authenticated user as a trusted machine/operator user with intentional access to:
+
+- Browse/select host directories for volumes
+- Configure local, network, and cloud storage backends
+- Trigger mounts/unmounts, backups, restores, and Restic maintenance
+- Read/write files through intended backup/restore workflows
+- Access repository/volume metadata needed to operate backups
+
+Do **not** report these as vulnerabilities by themselves:
+
+- Authenticated host filesystem browsing
+- Local directory volume pointing to broad host paths
+- Backing up arbitrary readable host paths
+- Restoring snapshots to arbitrary writable host paths
+- Authenticated Restic/mount/rclone execution through intended UI flows
+- Information disclosure to authenticated operators about filesystem paths or backend errors
+
+Only report issues when they violate this trust model, for example:
+
+- Unauthenticated access to operator features
+- CSRF/cross-origin abuse causing a trusted operator’s browser to perform actions
+- Shell/command injection beyond intended argument-based execution
+- Path traversal that escapes a deliberately configured root/volume/repository boundary
+- Secret leakage to logs, unauthenticated users, or non-operator contexts
+- Cross-organization data access despite authenticated trust
+- Privilege bypass between global admin/org admin/member where the product explicitly distinguishes roles
+- Unsafe dev-only features enabled without the documented gate
+- Vulnerabilities in parsing untrusted external data from repositories/backends/notifications
+- Persistence corruption, data loss, or workflow bypass not intended by operator actions

TROUBLESHOOTING.md

@@ -283,9 +283,8 @@ If you're experiencing rclone issues, verify all of the following:
 **Diagnosis:**
 
 ```bash
-# Check if config is accessible inside container
+# Check which config file rclone will use inside the container
-docker exec zerobyte ls -la /root/.config/rclone/
+docker exec zerobyte sh -lc 'echo HOME=$HOME; rclone config file'
-docker exec zerobyte cat /root/.config/rclone/rclone.conf
 ```
 
 **Solutions:**

app/app.css

@@ -37,7 +37,6 @@ body {
 }
 
 body {
-	@apply bg-[#131313];
 	min-height: 100dvh;
 }
 
@@ -67,6 +66,8 @@ body {
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-success: var(--success);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
@@ -88,38 +89,40 @@ body {
 
 :root {
 	--radius: 0.625rem;
-	--background: oklch(1 0 0);
+	--background: oklch(0.98 0.002 250);
-	--foreground: oklch(0.145 0 0);
+	--foreground: oklch(0.20 0.01 260);
-	--card: oklch(1 0 0);
+	--card: #ffffff;
-	--card-foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.20 0.01 260);
-	--card-header: oklch(0.922 0 0);
+	--card-header: oklch(0.99 0.001 260);
-	--popover: oklch(1 0 0);
+	--popover: #ffffff;
-	--popover-foreground: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.20 0.01 260);
-	--primary: oklch(0.205 0 0);
+	--primary: oklch(0.20 0.01 260);
-	--primary-foreground: oklch(0.985 0 0);
+	--primary-foreground: #ffffff;
-	--secondary: oklch(0.97 0 0);
+	--secondary: oklch(0.96 0.005 260);
-	--secondary-foreground: oklch(0.205 0 0);
+	--secondary-foreground: oklch(0.20 0.01 260);
-	--muted: oklch(0.97 0 0);
+	--muted: oklch(0.95 0.005 260);
-	--muted-foreground: oklch(0.556 0 0);
+	--muted-foreground: oklch(0.45 0.01 260);
-	--accent: oklch(0.97 0 0);
+	--accent: oklch(0.96 0.005 260);
-	--accent-foreground: oklch(0.205 0 0);
+	--accent-foreground: oklch(0.20 0.01 260);
 	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.922 0 0);
+	--destructive-foreground: #fff;
-	--input: oklch(0.922 0 0);
+	--success: oklch(0.57 0.16 148);
-	--ring: oklch(0.708 0 0);
+	--border: oklch(0.90 0.01 260);
-	--chart-1: oklch(0.646 0.222 41.116);
+	--input: oklch(0.90 0.01 260);
-	--chart-2: oklch(0.6 0.118 184.704);
+	--ring: oklch(0.7 0.01 260);
-	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-1: oklch(0.55 0.22 260);
-	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-2: oklch(0.6 0.15 200);
-	--chart-5: oklch(0.769 0.188 70.08);
+	--chart-3: oklch(0.45 0.12 280);
-	--sidebar: oklch(0.985 0 0);
+	--chart-4: oklch(0.7 0.15 190);
-	--sidebar-foreground: oklch(0.145 0 0);
+	--chart-5: oklch(0.55 0.18 300);
-	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar: #ffffff;
-	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.35 0.01 260);
-	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-primary: oklch(0.20 0.01 260);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-primary-foreground: #ffffff;
-	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-accent: oklch(0.97 0.005 260);
-	--sidebar-ring: oklch(0.708 0 0);
+	--sidebar-accent-foreground: oklch(0.20 0.01 260);
+	--sidebar-border: oklch(0.90 0.01 260);
+	--sidebar-ring: oklch(0.7 0.01 260);
 	--strong-accent: #ff543a;
 }
 
@@ -144,6 +147,8 @@ body {
 	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: #ff543a;
+	--destructive-foreground: #fff;
+	--success: oklch(0.696 0.17 162.48);
 	--border: oklch(1 0 0 / 10%);
 	--input: oklch(1 0 0 / 15%);
 	--ring: oklch(0.556 0 0);
@@ -174,11 +179,11 @@ body {
 
 @layer base {
 	:root {
-		--chart-1: oklch(0.646 0.222 41.116);
+		--chart-1: oklch(0.55 0.22 260);
-		--chart-2: oklch(0.6 0.118 184.704);
+		--chart-2: oklch(0.6 0.15 200);
-		--chart-3: oklch(0.398 0.07 227.392);
+		--chart-3: oklch(0.45 0.12 280);
-		--chart-4: oklch(0.828 0.189 84.429);
+		--chart-4: oklch(0.7 0.15 190);
-		--chart-5: oklch(0.769 0.188 70.08);
+		--chart-5: oklch(0.55 0.18 300);
 	}
 
 	.dark {
@@ -190,6 +195,17 @@ body {
 	}
 }
 
+.snapshot-scrollable::-webkit-scrollbar {
+	height: 6px;
+}
+.snapshot-scrollable::-webkit-scrollbar-track {
+	background: transparent;
+}
+.snapshot-scrollable::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border-radius: 999px;
+}
+
 /* Hide built-in password reveal/clear controls (notably in Edge on Windows) */
 [data-secret-input] input[type="password"]::-ms-reveal,
 [data-secret-input] input[type="password"]::-ms-clear {

app/client.tsx

@@ -0,0 +1,20 @@
+import { StrictMode, startTransition } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { StartClient } from "@tanstack/react-start/client";
+import { parseError } from "./client/lib/errors";
+
+startTransition(() => {
+	hydrateRoot(
+		document,
+		<StrictMode>
+			<StartClient />
+		</StrictMode>,
+		{
+			onRecoverableError: (error, errorInfo) => {
+				console.error(
+					`[react-recoverable-error] ${parseError(error)?.message}${errorInfo.componentStack ? `\n${errorInfo.componentStack.trim()}` : ""}`,
+				);
+			},
+		},
+	);
+});

app/client/api-client/client/client.gen.ts

@@ -1,285 +1,278 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import { createSseClient } from "../core/serverSentEvents.gen";
+import { createSseClient } from '../core/serverSentEvents.gen';
-import type { HttpMethod } from "../core/types.gen";
+import type { HttpMethod } from '../core/types.gen';
-import { getValidRequestBody } from "../core/utils.gen";
+import { getValidRequestBody } from '../core/utils.gen';
-import type { Client, Config, RequestOptions, ResolvedRequestOptions } from "./types.gen";
+import type { Client, Config, RequestOptions, ResolvedRequestOptions } from './types.gen';
 import {
-	buildUrl,
+  buildUrl,
-	createConfig,
+  createConfig,
-	createInterceptors,
+  createInterceptors,
-	getParseAs,
+  getParseAs,
-	mergeConfigs,
+  mergeConfigs,
-	mergeHeaders,
+  mergeHeaders,
-	setAuthParams,
+  setAuthParams,
-} from "./utils.gen";
+} from './utils.gen';
 
-type ReqInit = Omit<RequestInit, "body" | "headers"> & {
+type ReqInit = Omit<RequestInit, 'body' | 'headers'> & {
-	body?: any;
+  body?: any;
-	headers: ReturnType<typeof mergeHeaders>;
+  headers: ReturnType<typeof mergeHeaders>;
 };
 
 export const createClient = (config: Config = {}): Client => {
-	let _config = mergeConfigs(createConfig(), config);
+  let _config = mergeConfigs(createConfig(), config);
 
-	const getConfig = (): Config => ({ ..._config });
+  const getConfig = (): Config => ({ ..._config });
 
-	const setConfig = (config: Config): Config => {
+  const setConfig = (config: Config): Config => {
-		_config = mergeConfigs(_config, config);
+    _config = mergeConfigs(_config, config);
-		return getConfig();
+    return getConfig();
-	};
+  };
 
-	const interceptors = createInterceptors<Request, Response, unknown, ResolvedRequestOptions>();
+  const interceptors = createInterceptors<Request, Response, unknown, ResolvedRequestOptions>();
 
-	const beforeRequest = async (options: RequestOptions) => {
+  const beforeRequest = async <
-		const opts = {
+    TData = unknown,
-			..._config,
+    TResponseStyle extends 'data' | 'fields' = 'fields',
-			...options,
+    ThrowOnError extends boolean = boolean,
-			fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
+    Url extends string = string,
-			headers: mergeHeaders(_config.headers, options.headers),
+  >(
-			serializedBody: undefined,
+    options: RequestOptions<TData, TResponseStyle, ThrowOnError, Url>,
-		};
+  ) => {
+    const opts = {
+      ..._config,
+      ...options,
+      fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
+      headers: mergeHeaders(_config.headers, options.headers),
+      serializedBody: undefined as string | undefined,
+    };
 
-		if (opts.security) {
+    if (opts.security) {
-			await setAuthParams({
+      await setAuthParams(opts);
-				...opts,
+    }
-				security: opts.security,
-			});
-		}
 
-		if (opts.requestValidator) {
+    if (opts.requestValidator) {
-			await opts.requestValidator(opts);
+      await opts.requestValidator(opts);
-		}
+    }
 
-		if (opts.body !== undefined && opts.bodySerializer) {
+    if (opts.body !== undefined && opts.bodySerializer) {
-			opts.serializedBody = opts.bodySerializer(opts.body);
+      opts.serializedBody = opts.bodySerializer(opts.body) as string | undefined;
-		}
+    }
 
-		// remove Content-Type header if body is empty to avoid sending invalid requests
+    // remove Content-Type header if body is empty to avoid sending invalid requests
-		if (opts.body === undefined || opts.serializedBody === "") {
+    if (opts.body === undefined || opts.serializedBody === '') {
-			opts.headers.delete("Content-Type");
+      opts.headers.delete('Content-Type');
-		}
+    }
 
-		const url = buildUrl(opts);
+    const resolvedOpts = opts as typeof opts &
+      ResolvedRequestOptions<TResponseStyle, ThrowOnError, Url>;
+    const url = buildUrl(resolvedOpts);
 
-		return { opts, url };
+    return { opts: resolvedOpts, url };
-	};
+  };
 
-	const request: Client["request"] = async (options) => {
+  const request: Client['request'] = async (options) => {
-		// @ts-expect-error
+    const throwOnError = options.throwOnError ?? _config.throwOnError;
-		const { opts, url } = await beforeRequest(options);
+    const responseStyle = options.responseStyle ?? _config.responseStyle;
-		const requestInit: ReqInit = {
-			redirect: "follow",
-			...opts,
-			body: getValidRequestBody(opts),
-		};
 
-		let request = new Request(url, requestInit);
+    let request: Request | undefined;
+    let response: Response | undefined;
 
-		for (const fn of interceptors.request.fns) {
+    try {
-			if (fn) {
+      const { opts, url } = await beforeRequest(options);
-				request = await fn(request, opts);
+      const requestInit: ReqInit = {
-			}
+        redirect: 'follow',
-		}
+        ...opts,
+        body: getValidRequestBody(opts),
+      };
 
-		// fetch must be assigned here, otherwise it would throw the error:
+      request = new Request(url, requestInit);
-		// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
-		const _fetch = opts.fetch!;
-		let response: Response;
 
-		try {
+      for (const fn of interceptors.request.fns) {
-			response = await _fetch(request);
+        if (fn) {
-		} catch (error) {
+          request = await fn(request, opts);
-			// Handle fetch exceptions (AbortError, network errors, etc.)
+        }
-			let finalError = error;
+      }
 
-			for (const fn of interceptors.error.fns) {
+      // fetch must be assigned here, otherwise it would throw the error:
-				if (fn) {
+      // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
-					finalError = (await fn(error, undefined as any, request, opts)) as unknown;
+      const _fetch = opts.fetch!;
-				}
-			}
 
-			finalError = finalError || ({} as unknown);
+      response = await _fetch(request);
 
-			if (opts.throwOnError) {
+      for (const fn of interceptors.response.fns) {
-				throw finalError;
+        if (fn) {
-			}
+          response = await fn(response, request, opts);
+        }
+      }
 
-			// Return error response
+      const result = {
-			return opts.responseStyle === "data"
+        request,
-				? undefined
+        response,
-				: {
+      };
-						error: finalError,
-						request,
-						response: undefined as any,
-					};
-		}
 
-		for (const fn of interceptors.response.fns) {
+      if (response.ok) {
-			if (fn) {
+        const parseAs =
-				response = await fn(response, request, opts);
+          (opts.parseAs === 'auto'
-			}
+            ? getParseAs(response.headers.get('Content-Type'))
-		}
+            : opts.parseAs) ?? 'json';
 
-		const result = {
+        if (response.status === 204 || response.headers.get('Content-Length') === '0') {
-			request,
+          let emptyData: any;
-			response,
+          switch (parseAs) {
-		};
+            case 'arrayBuffer':
+            case 'blob':
+            case 'text':
+              emptyData = await response[parseAs]();
+              break;
+            case 'formData':
+              emptyData = new FormData();
+              break;
+            case 'stream':
+              emptyData = response.body;
+              break;
+            case 'json':
+            default:
+              emptyData = {};
+              break;
+          }
+          return opts.responseStyle === 'data'
+            ? emptyData
+            : {
+                data: emptyData,
+                ...result,
+              };
+        }
 
-		if (response.ok) {
+        let data: any;
-			const parseAs =
+        switch (parseAs) {
-				(opts.parseAs === "auto" ? getParseAs(response.headers.get("Content-Type")) : opts.parseAs) ?? "json";
+          case 'arrayBuffer':
+          case 'blob':
+          case 'formData':
+          case 'text':
+            data = await response[parseAs]();
+            break;
+          case 'json': {
+            // Some servers return 200 with no Content-Length and empty body.
+            // response.json() would throw; read as text and parse if non-empty.
+            const text = await response.text();
+            data = text ? JSON.parse(text) : {};
+            break;
+          }
+          case 'stream':
+            return opts.responseStyle === 'data'
+              ? response.body
+              : {
+                  data: response.body,
+                  ...result,
+                };
+        }
 
-			if (response.status === 204 || response.headers.get("Content-Length") === "0") {
+        if (parseAs === 'json') {
-				let emptyData: any;
+          if (opts.responseValidator) {
-				switch (parseAs) {
+            await opts.responseValidator(data);
-					case "arrayBuffer":
+          }
-					case "blob":
-					case "text":
-						emptyData = await response[parseAs]();
-						break;
-					case "formData":
-						emptyData = new FormData();
-						break;
-					case "stream":
-						emptyData = response.body;
-						break;
-					case "json":
-					default:
-						emptyData = {};
-						break;
-				}
-				return opts.responseStyle === "data"
-					? emptyData
-					: {
-							data: emptyData,
-							...result,
-						};
-			}
 
-			let data: any;
+          if (opts.responseTransformer) {
-			switch (parseAs) {
+            data = await opts.responseTransformer(data);
-				case "arrayBuffer":
+          }
-				case "blob":
+        }
-				case "formData":
-				case "text":
-					data = await response[parseAs]();
-					break;
-				case "json": {
-					// Some servers return 200 with no Content-Length and empty body.
-					// response.json() would throw; read as text and parse if non-empty.
-					const text = await response.text();
-					data = text ? JSON.parse(text) : {};
-					break;
-				}
-				case "stream":
-					return opts.responseStyle === "data"
-						? response.body
-						: {
-								data: response.body,
-								...result,
-							};
-			}
 
-			if (parseAs === "json") {
+        return opts.responseStyle === 'data'
-				if (opts.responseValidator) {
+          ? data
-					await opts.responseValidator(data);
+          : {
-				}
+              data,
+              ...result,
+            };
+      }
 
-				if (opts.responseTransformer) {
+      const textError = await response.text();
-					data = await opts.responseTransformer(data);
+      let jsonError: unknown;
-				}
-			}
 
-			return opts.responseStyle === "data"
+      try {
-				? data
+        jsonError = JSON.parse(textError);
-				: {
+      } catch {
-						data,
+        // noop
-						...result,
+      }
-					};
-		}
 
-		const textError = await response.text();
+      throw jsonError ?? textError;
-		let jsonError: unknown;
+    } catch (error) {
+      let finalError = error;
 
-		try {
+      for (const fn of interceptors.error.fns) {
-			jsonError = JSON.parse(textError);
+        if (fn) {
-		} catch {
+          finalError = await fn(finalError, response, request, options as ResolvedRequestOptions);
-			// noop
+        }
-		}
+      }
 
-		const error = jsonError ?? textError;
+      finalError = finalError || {};
-		let finalError = error;
 
-		for (const fn of interceptors.error.fns) {
+      if (throwOnError) {
-			if (fn) {
+        throw finalError;
-				finalError = (await fn(error, response, request, opts)) as string;
+      }
-			}
-		}
 
-		finalError = finalError || ({} as string);
+      // TODO: we probably want to return error and improve types
+      return responseStyle === 'data'
+        ? undefined
+        : {
+            error: finalError,
+            request,
+            response,
+          };
+    }
+  };
 
-		if (opts.throwOnError) {
+  const makeMethodFn = (method: Uppercase<HttpMethod>) => (options: RequestOptions) =>
-			throw finalError;
+    request({ ...options, method });
-		}
 
-		// TODO: we probably want to return error and improve types
+  const makeSseFn = (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
-		return opts.responseStyle === "data"
+    const { opts, url } = await beforeRequest(options);
-			? undefined
+    return createSseClient({
-			: {
+      ...opts,
-					error: finalError,
+      body: opts.body as BodyInit | null | undefined,
-					...result,
+      method,
-				};
+      onRequest: async (url, init) => {
-	};
+        let request = new Request(url, init);
+        for (const fn of interceptors.request.fns) {
+          if (fn) {
+            request = await fn(request, opts);
+          }
+        }
+        return request;
+      },
+      serializedBody: getValidRequestBody(opts) as BodyInit | null | undefined,
+      url,
+    });
+  };
 
-	const makeMethodFn = (method: Uppercase<HttpMethod>) => (options: RequestOptions) => request({ ...options, method });
+  const _buildUrl: Client['buildUrl'] = (options) => buildUrl({ ..._config, ...options });
 
-	const makeSseFn = (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
+  return {
-		const { opts, url } = await beforeRequest(options);
+    buildUrl: _buildUrl,
-		return createSseClient({
+    connect: makeMethodFn('CONNECT'),
-			...opts,
+    delete: makeMethodFn('DELETE'),
-			body: opts.body as BodyInit | null | undefined,
+    get: makeMethodFn('GET'),
-			headers: opts.headers as unknown as Record<string, string>,
+    getConfig,
-			method,
+    head: makeMethodFn('HEAD'),
-			onRequest: async (url, init) => {
+    interceptors,
-				let request = new Request(url, init);
+    options: makeMethodFn('OPTIONS'),
-				for (const fn of interceptors.request.fns) {
+    patch: makeMethodFn('PATCH'),
-					if (fn) {
+    post: makeMethodFn('POST'),
-						request = await fn(request, opts);
+    put: makeMethodFn('PUT'),
-					}
+    request,
-				}
+    setConfig,
-				return request;
+    sse: {
-			},
+      connect: makeSseFn('CONNECT'),
-			serializedBody: getValidRequestBody(opts) as BodyInit | null | undefined,
+      delete: makeSseFn('DELETE'),
-			url,
+      get: makeSseFn('GET'),
-		});
+      head: makeSseFn('HEAD'),
-	};
+      options: makeSseFn('OPTIONS'),
-
+      patch: makeSseFn('PATCH'),
-	return {
+      post: makeSseFn('POST'),
-		buildUrl,
+      put: makeSseFn('PUT'),
-		connect: makeMethodFn("CONNECT"),
+      trace: makeSseFn('TRACE'),
-		delete: makeMethodFn("DELETE"),
+    },
-		get: makeMethodFn("GET"),
+    trace: makeMethodFn('TRACE'),
-		getConfig,
+  } as Client;
-		head: makeMethodFn("HEAD"),
-		interceptors,
-		options: makeMethodFn("OPTIONS"),
-		patch: makeMethodFn("PATCH"),
-		post: makeMethodFn("POST"),
-		put: makeMethodFn("PUT"),
-		request,
-		setConfig,
-		sse: {
-			connect: makeSseFn("CONNECT"),
-			delete: makeSseFn("DELETE"),
-			get: makeSseFn("GET"),
-			head: makeSseFn("HEAD"),
-			options: makeSseFn("OPTIONS"),
-			patch: makeSseFn("PATCH"),
-			post: makeSseFn("POST"),
-			put: makeSseFn("PUT"),
-			trace: makeSseFn("TRACE"),
-		},
-		trace: makeMethodFn("TRACE"),
-	} as Client;
 };

app/client/api-client/client/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
 export type { Auth } from "../core/auth.gen";

app/client/api-client/client/types.gen.ts

@@ -1,175 +1,187 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { Auth } from "../core/auth.gen";
+import type { Auth } from '../core/auth.gen';
-import type { ServerSentEventsOptions, ServerSentEventsResult } from "../core/serverSentEvents.gen";
+import type {
-import type { Client as CoreClient, Config as CoreConfig } from "../core/types.gen";
+  ServerSentEventsOptions,
-import type { Middleware } from "./utils.gen";
+  ServerSentEventsResult,
+} from '../core/serverSentEvents.gen';
+import type { Client as CoreClient, Config as CoreConfig } from '../core/types.gen';
+import type { Middleware } from './utils.gen';
 
-export type ResponseStyle = "data" | "fields";
+export type ResponseStyle = 'data' | 'fields';
 
 export interface Config<T extends ClientOptions = ClientOptions>
-	extends Omit<RequestInit, "body" | "headers" | "method">, CoreConfig {
+  extends Omit<RequestInit, 'body' | 'headers' | 'method'>, CoreConfig {
-	/**
+  /**
-	 * Base URL for all requests made by this client.
+   * Base URL for all requests made by this client.
-	 */
+   */
-	baseUrl?: T["baseUrl"];
+  baseUrl?: T['baseUrl'];
-	/**
+  /**
-	 * Fetch API implementation. You can use this option to provide a custom
+   * Fetch API implementation. You can use this option to provide a custom
-	 * fetch instance.
+   * fetch instance.
-	 *
+   *
-	 * @default globalThis.fetch
+   * @default globalThis.fetch
-	 */
+   */
-	fetch?: typeof fetch;
+  fetch?: typeof fetch;
-	/**
+  /**
-	 * Please don't use the Fetch client for Next.js applications. The `next`
+   * Please don't use the Fetch client for Next.js applications. The `next`
-	 * options won't have any effect.
+   * options won't have any effect.
-	 *
+   *
-	 * Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
+   * Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
-	 */
+   */
-	next?: never;
+  next?: never;
-	/**
+  /**
-	 * Return the response data parsed in a specified format. By default, `auto`
+   * Return the response data parsed in a specified format. By default, `auto`
-	 * will infer the appropriate method from the `Content-Type` response header.
+   * will infer the appropriate method from the `Content-Type` response header.
-	 * You can override this behavior with any of the {@link Body} methods.
+   * You can override this behavior with any of the {@link Body} methods.
-	 * Select `stream` if you don't want to parse response data at all.
+   * Select `stream` if you don't want to parse response data at all.
-	 *
+   *
-	 * @default 'auto'
+   * @default 'auto'
-	 */
+   */
-	parseAs?: "arrayBuffer" | "auto" | "blob" | "formData" | "json" | "stream" | "text";
+  parseAs?: 'arrayBuffer' | 'auto' | 'blob' | 'formData' | 'json' | 'stream' | 'text';
-	/**
+  /**
-	 * Should we return only data or multiple fields (data, error, response, etc.)?
+   * Should we return only data or multiple fields (data, error, response, etc.)?
-	 *
+   *
-	 * @default 'fields'
+   * @default 'fields'
-	 */
+   */
-	responseStyle?: ResponseStyle;
+  responseStyle?: ResponseStyle;
-	/**
+  /**
-	 * Throw an error instead of returning it in the response?
+   * Throw an error instead of returning it in the response?
-	 *
+   *
-	 * @default false
+   * @default false
-	 */
+   */
-	throwOnError?: T["throwOnError"];
+  throwOnError?: T['throwOnError'];
 }
 
 export interface RequestOptions<
-	TData = unknown,
+  TData = unknown,
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
-	ThrowOnError extends boolean = boolean,
+  ThrowOnError extends boolean = boolean,
-	Url extends string = string,
+  Url extends string = string,
 >
-	extends
+  extends
-		Config<{
+    Config<{
-			responseStyle: TResponseStyle;
+      responseStyle: TResponseStyle;
-			throwOnError: ThrowOnError;
+      throwOnError: ThrowOnError;
-		}>,
+    }>,
-		Pick<
+    Pick<
-			ServerSentEventsOptions<TData>,
+      ServerSentEventsOptions<TData>,
-			"onSseError" | "onSseEvent" | "sseDefaultRetryDelay" | "sseMaxRetryAttempts" | "sseMaxRetryDelay"
+      | 'onRequest'
-		> {
+      | 'onSseError'
-	/**
+      | 'onSseEvent'
-	 * Any body that you want to add to your request.
+      | 'sseDefaultRetryDelay'
-	 *
+      | 'sseMaxRetryAttempts'
-	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
+      | 'sseMaxRetryDelay'
-	 */
+    > {
-	body?: unknown;
+  /**
-	path?: Record<string, unknown>;
+   * Any body that you want to add to your request.
-	query?: Record<string, unknown>;
+   *
-	/**
+   * {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
-	 * Security mechanism(s) to use for the request.
+   */
-	 */
+  body?: unknown;
-	security?: ReadonlyArray<Auth>;
+  path?: Record<string, unknown>;
-	url: Url;
+  query?: Record<string, unknown>;
+  /**
+   * Security mechanism(s) to use for the request.
+   */
+  security?: ReadonlyArray<Auth>;
+  url: Url;
 }
 
 export interface ResolvedRequestOptions<
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
-	ThrowOnError extends boolean = boolean,
+  ThrowOnError extends boolean = boolean,
-	Url extends string = string,
+  Url extends string = string,
 > extends RequestOptions<unknown, TResponseStyle, ThrowOnError, Url> {
-	serializedBody?: string;
+  headers: Headers;
+  serializedBody?: string;
 }
 
 export type RequestResult<
-	TData = unknown,
+  TData = unknown,
-	TError = unknown,
+  TError = unknown,
-	ThrowOnError extends boolean = boolean,
+  ThrowOnError extends boolean = boolean,
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
 > = ThrowOnError extends true
-	? Promise<
+  ? Promise<
-			TResponseStyle extends "data"
+      TResponseStyle extends 'data'
-				? TData extends Record<string, unknown>
+        ? TData extends Record<string, unknown>
-					? TData[keyof TData]
+          ? TData[keyof TData]
-					: TData
+          : TData
-				: {
+        : {
-						data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
+            data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
-						request: Request;
+            request: Request;
-						response: Response;
+            response: Response;
-					}
+          }
-		>
+    >
-	: Promise<
+  : Promise<
-			TResponseStyle extends "data"
+      TResponseStyle extends 'data'
-				? (TData extends Record<string, unknown> ? TData[keyof TData] : TData) | undefined
+        ? (TData extends Record<string, unknown> ? TData[keyof TData] : TData) | undefined
-				: (
+        : (
-						| {
+            | {
-								data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
+                data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
-								error: undefined;
+                error: undefined;
-						  }
+              }
-						| {
+            | {
-								data: undefined;
+                data: undefined;
-								error: TError extends Record<string, unknown> ? TError[keyof TError] : TError;
+                error: TError extends Record<string, unknown> ? TError[keyof TError] : TError;
-						  }
+              }
-					) & {
+          ) & {
-						request: Request;
+            /** request may be undefined, because error may be from building the request object itself */
-						response: Response;
+            request?: Request;
-					}
+            /** response may be undefined, because error may be from building the request object itself or from a network error */
-		>;
+            response?: Response;
+          }
+    >;
 
 export interface ClientOptions {
-	baseUrl?: string;
+  baseUrl?: string;
-	responseStyle?: ResponseStyle;
+  responseStyle?: ResponseStyle;
-	throwOnError?: boolean;
+  throwOnError?: boolean;
 }
 
 type MethodFn = <
-	TData = unknown,
+  TData = unknown,
-	TError = unknown,
+  TError = unknown,
-	ThrowOnError extends boolean = false,
+  ThrowOnError extends boolean = false,
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
 >(
-	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method">,
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>,
 ) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
 
 type SseFn = <
-	TData = unknown,
+  TData = unknown,
-	TError = unknown,
+  TError = unknown,
-	ThrowOnError extends boolean = false,
+  ThrowOnError extends boolean = false,
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
 >(
-	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method">,
+  options: Omit<RequestOptions<never, TResponseStyle, ThrowOnError>, 'method'>,
 ) => Promise<ServerSentEventsResult<TData, TError>>;
 
 type RequestFn = <
-	TData = unknown,
+  TData = unknown,
-	TError = unknown,
+  TError = unknown,
-	ThrowOnError extends boolean = false,
+  ThrowOnError extends boolean = false,
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
 >(
-	options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, "method"> &
+  options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'> &
-		Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, "method">,
+    Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, 'method'>,
 ) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
 
 type BuildUrlFn = <
-	TData extends {
+  TData extends {
-		body?: unknown;
+    body?: unknown;
-		path?: Record<string, unknown>;
+    path?: Record<string, unknown>;
-		query?: Record<string, unknown>;
+    query?: Record<string, unknown>;
-		url: string;
+    url: string;
-	},
+  },
 >(
-	options: TData & Options<TData>,
+  options: TData & Options<TData>,
 ) => string;
 
 export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn> & {
-	interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
+  interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
 };
 
 /**
@@ -181,23 +193,26 @@ export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn>
  * to ensure your client always has the correct values.
  */
 export type CreateClientConfig<T extends ClientOptions = ClientOptions> = (
-	override?: Config<ClientOptions & T>,
+  override?: Config<ClientOptions & T>,
 ) => Config<Required<ClientOptions> & T>;
 
 export interface TDataShape {
-	body?: unknown;
+  body?: unknown;
-	headers?: unknown;
+  headers?: unknown;
-	path?: unknown;
+  path?: unknown;
-	query?: unknown;
+  query?: unknown;
-	url: string;
+  url: string;
 }
 
 type OmitKeys<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export type Options<
-	TData extends TDataShape = TDataShape,
+  TData extends TDataShape = TDataShape,
-	ThrowOnError extends boolean = boolean,
+  ThrowOnError extends boolean = boolean,
-	TResponse = unknown,
+  TResponse = unknown,
-	TResponseStyle extends ResponseStyle = "fields",
+  TResponseStyle extends ResponseStyle = 'fields',
-> = OmitKeys<RequestOptions<TResponse, TResponseStyle, ThrowOnError>, "body" | "path" | "query" | "url"> &
+> = OmitKeys<
-	([TData] extends [never] ? unknown : Omit<TData, "url">);
+  RequestOptions<TResponse, TResponseStyle, ThrowOnError>,
+  'body' | 'path' | 'query' | 'url'
+> &
+  ([TData] extends [never] ? unknown : Omit<TData, 'url'>);

app/client/api-client/client/utils.gen.ts

@@ -1,289 +1,317 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import { getAuthToken } from "../core/auth.gen";
+import { getAuthToken } from '../core/auth.gen';
-import type { QuerySerializerOptions } from "../core/bodySerializer.gen";
+import type { QuerySerializerOptions } from '../core/bodySerializer.gen';
-import { jsonBodySerializer } from "../core/bodySerializer.gen";
+import { jsonBodySerializer } from '../core/bodySerializer.gen';
-import { serializeArrayParam, serializeObjectParam, serializePrimitiveParam } from "../core/pathSerializer.gen";
+import {
-import { getUrl } from "../core/utils.gen";
+  serializeArrayParam,
-import type { Client, ClientOptions, Config, RequestOptions } from "./types.gen";
+  serializeObjectParam,
+  serializePrimitiveParam,
+} from '../core/pathSerializer.gen';
+import { getUrl } from '../core/utils.gen';
+import type { Client, ClientOptions, Config, RequestOptions } from './types.gen';
 
-export const createQuerySerializer = <T = unknown>({ parameters = {}, ...args }: QuerySerializerOptions = {}) => {
+export const createQuerySerializer = <T = unknown>({
-	const querySerializer = (queryParams: T) => {
+  parameters = {},
-		const search: string[] = [];
+  ...args
-		if (queryParams && typeof queryParams === "object") {
+}: QuerySerializerOptions = {}) => {
-			for (const name in queryParams) {
+  const querySerializer = (queryParams: T) => {
-				const value = queryParams[name];
+    const search: string[] = [];
+    if (queryParams && typeof queryParams === 'object') {
+      for (const name in queryParams) {
+        const value = queryParams[name];
 
-				if (value === undefined || value === null) {
+        if (value === undefined || value === null) {
-					continue;
+          continue;
-				}
+        }
 
-				const options = parameters[name] || args;
+        const options = parameters[name] || args;
 
-				if (Array.isArray(value)) {
+        if (Array.isArray(value)) {
-					const serializedArray = serializeArrayParam({
+          const serializedArray = serializeArrayParam({
-						allowReserved: options.allowReserved,
+            allowReserved: options.allowReserved,
-						explode: true,
+            explode: true,
-						name,
+            name,
-						style: "form",
+            style: 'form',
-						value,
+            value,
-						...options.array,
+            ...options.array,
-					});
+          });
-					if (serializedArray) search.push(serializedArray);
+          if (serializedArray) search.push(serializedArray);
-				} else if (typeof value === "object") {
+        } else if (typeof value === 'object') {
-					const serializedObject = serializeObjectParam({
+          const serializedObject = serializeObjectParam({
-						allowReserved: options.allowReserved,
+            allowReserved: options.allowReserved,
-						explode: true,
+            explode: true,
-						name,
+            name,
-						style: "deepObject",
+            style: 'deepObject',
-						value: value as Record<string, unknown>,
+            value: value as Record<string, unknown>,
-						...options.object,
+            ...options.object,
-					});
+          });
-					if (serializedObject) search.push(serializedObject);
+          if (serializedObject) search.push(serializedObject);
-				} else {
+        } else {
-					const serializedPrimitive = serializePrimitiveParam({
+          const serializedPrimitive = serializePrimitiveParam({
-						allowReserved: options.allowReserved,
+            allowReserved: options.allowReserved,
-						name,
+            name,
-						value: value as string,
+            value: value as string,
-					});
+          });
-					if (serializedPrimitive) search.push(serializedPrimitive);
+          if (serializedPrimitive) search.push(serializedPrimitive);
-				}
+        }
-			}
+      }
-		}
+    }
-		return search.join("&");
+    return search.join('&');
-	};
+  };
-	return querySerializer;
+  return querySerializer;
 };
 
 /**
  * Infers parseAs value from provided Content-Type header.
  */
-export const getParseAs = (contentType: string | null): Exclude<Config["parseAs"], "auto"> => {
+export const getParseAs = (contentType: string | null): Exclude<Config['parseAs'], 'auto'> => {
-	if (!contentType) {
+  if (!contentType) {
-		// If no Content-Type header is provided, the best we can do is return the raw response body,
+    // If no Content-Type header is provided, the best we can do is return the raw response body,
-		// which is effectively the same as the 'stream' option.
+    // which is effectively the same as the 'stream' option.
-		return "stream";
+    return 'stream';
-	}
+  }
 
-	const cleanContent = contentType.split(";")[0]?.trim();
+  const cleanContent = contentType.split(';')[0]?.trim();
 
-	if (!cleanContent) {
+  if (!cleanContent) {
-		return;
+    return;
-	}
+  }
 
-	if (cleanContent.startsWith("application/json") || cleanContent.endsWith("+json")) {
+  if (cleanContent.startsWith('application/json') || cleanContent.endsWith('+json')) {
-		return "json";
+    return 'json';
-	}
+  }
 
-	if (cleanContent === "multipart/form-data") {
+  if (cleanContent === 'multipart/form-data') {
-		return "formData";
+    return 'formData';
-	}
+  }
 
-	if (["application/", "audio/", "image/", "video/"].some((type) => cleanContent.startsWith(type))) {
+  if (
-		return "blob";
+    ['application/', 'audio/', 'image/', 'video/'].some((type) => cleanContent.startsWith(type))
-	}
+  ) {
+    return 'blob';
+  }
 
-	if (cleanContent.startsWith("text/")) {
+  if (cleanContent.startsWith('text/')) {
-		return "text";
+    return 'text';
-	}
+  }
 
-	return;
+  return;
 };
 
 const checkForExistence = (
-	options: Pick<RequestOptions, "auth" | "query"> & {
+  options: Pick<RequestOptions, 'auth' | 'query'> & {
-		headers: Headers;
+    headers: Headers;
-	},
+  },
-	name?: string,
+  name?: string,
 ): boolean => {
-	if (!name) {
+  if (!name) {
-		return false;
+    return false;
-	}
+  }
-	if (options.headers.has(name) || options.query?.[name] || options.headers.get("Cookie")?.includes(`${name}=`)) {
+  if (
-		return true;
+    options.headers.has(name) ||
-	}
+    options.query?.[name] ||
-	return false;
+    options.headers.get('Cookie')?.includes(`${name}=`)
+  ) {
+    return true;
+  }
+  return false;
 };
 
-export const setAuthParams = async ({
+export async function setAuthParams(
-	security,
+  options: Pick<RequestOptions, 'auth' | 'query' | 'security'> & {
-	...options
+    headers: Headers;
-}: Pick<Required<RequestOptions>, "security"> &
+  },
-	Pick<RequestOptions, "auth" | "query"> & {
+): Promise<void> {
-		headers: Headers;
+  for (const auth of options.security ?? []) {
-	}) => {
+    if (checkForExistence(options, auth.name)) {
-	for (const auth of security) {
+      continue;
-		if (checkForExistence(options, auth.name)) {
+    }
-			continue;
-		}
 
-		const token = await getAuthToken(auth, options.auth);
+    const token = await getAuthToken(auth, options.auth);
 
-		if (!token) {
+    if (!token) {
-			continue;
+      continue;
-		}
+    }
 
-		const name = auth.name ?? "Authorization";
+    const name = auth.name ?? 'Authorization';
 
-		switch (auth.in) {
+    switch (auth.in) {
-			case "query":
+      case 'query':
-				if (!options.query) {
+        if (!options.query) {
-					options.query = {};
+          options.query = {};
-				}
+        }
-				options.query[name] = token;
+        options.query[name] = token;
-				break;
+        break;
-			case "cookie":
+      case 'cookie':
-				options.headers.append("Cookie", `${name}=${token}`);
+        options.headers.append('Cookie', `${name}=${token}`);
-				break;
+        break;
-			case "header":
+      case 'header':
-			default:
+      default:
-				options.headers.set(name, token);
+        options.headers.set(name, token);
-				break;
+        break;
-		}
+    }
-	}
+  }
-};
+}
 
-export const buildUrl: Client["buildUrl"] = (options) =>
+export const buildUrl: Client['buildUrl'] = (options) =>
-	getUrl({
+  getUrl({
-		baseUrl: options.baseUrl as string,
+    baseUrl: options.baseUrl as string,
-		path: options.path,
+    path: options.path,
-		query: options.query,
+    query: options.query,
-		querySerializer:
+    querySerializer:
-			typeof options.querySerializer === "function"
+      typeof options.querySerializer === 'function'
-				? options.querySerializer
+        ? options.querySerializer
-				: createQuerySerializer(options.querySerializer),
+        : createQuerySerializer(options.querySerializer),
-		url: options.url,
+    url: options.url,
-	});
+  });
 
 export const mergeConfigs = (a: Config, b: Config): Config => {
-	const config = { ...a, ...b };
+  const config = { ...a, ...b };
-	if (config.baseUrl?.endsWith("/")) {
+  if (config.baseUrl?.endsWith('/')) {
-		config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
+    config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
-	}
+  }
-	config.headers = mergeHeaders(a.headers, b.headers);
+  config.headers = mergeHeaders(a.headers, b.headers);
-	return config;
+  return config;
 };
 
 const headersEntries = (headers: Headers): Array<[string, string]> => {
-	const entries: Array<[string, string]> = [];
+  const entries: Array<[string, string]> = [];
-	headers.forEach((value, key) => {
+  headers.forEach((value, key) => {
-		entries.push([key, value]);
+    entries.push([key, value]);
-	});
+  });
-	return entries;
+  return entries;
 };
 
-export const mergeHeaders = (...headers: Array<Required<Config>["headers"] | undefined>): Headers => {
+export const mergeHeaders = (
-	const mergedHeaders = new Headers();
+  ...headers: Array<Required<Config>['headers'] | undefined>
-	for (const header of headers) {
+): Headers => {
-		if (!header) {
+  const mergedHeaders = new Headers();
-			continue;
+  for (const header of headers) {
-		}
+    if (!header) {
+      continue;
+    }
 
-		const iterator = header instanceof Headers ? headersEntries(header) : Object.entries(header);
+    const iterator = header instanceof Headers ? headersEntries(header) : Object.entries(header);
 
-		for (const [key, value] of iterator) {
+    for (const [key, value] of iterator) {
-			if (value === null) {
+      if (value === null) {
-				mergedHeaders.delete(key);
+        mergedHeaders.delete(key);
-			} else if (Array.isArray(value)) {
+      } else if (Array.isArray(value)) {
-				for (const v of value) {
+        for (const v of value) {
-					mergedHeaders.append(key, v as string);
+          mergedHeaders.append(key, v as string);
-				}
+        }
-			} else if (value !== undefined) {
+      } else if (value !== undefined) {
-				// assume object headers are meant to be JSON stringified, i.e. their
+        // assume object headers are meant to be JSON stringified, i.e., their
-				// content value in OpenAPI specification is 'application/json'
+        // content value in OpenAPI specification is 'application/json'
-				mergedHeaders.set(key, typeof value === "object" ? JSON.stringify(value) : (value as string));
+        mergedHeaders.set(
-			}
+          key,
-		}
+          typeof value === 'object' ? JSON.stringify(value) : (value as string),
-	}
+        );
-	return mergedHeaders;
+      }
+    }
+  }
+  return mergedHeaders;
 };
 
 type ErrInterceptor<Err, Res, Req, Options> = (
-	error: Err,
+  error: Err,
-	response: Res,
+  /** response may be undefined due to a network error where no response object is produced */
-	request: Req,
+  response: Res | undefined,
-	options: Options,
+  /** request may be undefined, because error may be from building the request object itself */
+  request: Req | undefined,
+  options: Options,
 ) => Err | Promise<Err>;
 
 type ReqInterceptor<Req, Options> = (request: Req, options: Options) => Req | Promise<Req>;
 
-type ResInterceptor<Res, Req, Options> = (response: Res, request: Req, options: Options) => Res | Promise<Res>;
+type ResInterceptor<Res, Req, Options> = (
+  response: Res,
+  request: Req,
+  options: Options,
+) => Res | Promise<Res>;
 
 class Interceptors<Interceptor> {
-	fns: Array<Interceptor | null> = [];
+  fns: Array<Interceptor | null> = [];
 
-	clear(): void {
+  clear(): void {
-		this.fns = [];
+    this.fns = [];
-	}
+  }
 
-	eject(id: number | Interceptor): void {
+  eject(id: number | Interceptor): void {
-		const index = this.getInterceptorIndex(id);
+    const index = this.getInterceptorIndex(id);
-		if (this.fns[index]) {
+    if (this.fns[index]) {
-			this.fns[index] = null;
+      this.fns[index] = null;
-		}
+    }
-	}
+  }
 
-	exists(id: number | Interceptor): boolean {
+  exists(id: number | Interceptor): boolean {
-		const index = this.getInterceptorIndex(id);
+    const index = this.getInterceptorIndex(id);
-		return Boolean(this.fns[index]);
+    return Boolean(this.fns[index]);
-	}
+  }
 
-	getInterceptorIndex(id: number | Interceptor): number {
+  getInterceptorIndex(id: number | Interceptor): number {
-		if (typeof id === "number") {
+    if (typeof id === 'number') {
-			return this.fns[id] ? id : -1;
+      return this.fns[id] ? id : -1;
-		}
+    }
-		return this.fns.indexOf(id);
+    return this.fns.indexOf(id);
-	}
+  }
 
-	update(id: number | Interceptor, fn: Interceptor): number | Interceptor | false {
+  update(id: number | Interceptor, fn: Interceptor): number | Interceptor | false {
-		const index = this.getInterceptorIndex(id);
+    const index = this.getInterceptorIndex(id);
-		if (this.fns[index]) {
+    if (this.fns[index]) {
-			this.fns[index] = fn;
+      this.fns[index] = fn;
-			return id;
+      return id;
-		}
+    }
-		return false;
+    return false;
-	}
+  }
 
-	use(fn: Interceptor): number {
+  use(fn: Interceptor): number {
-		this.fns.push(fn);
+    this.fns.push(fn);
-		return this.fns.length - 1;
+    return this.fns.length - 1;
-	}
+  }
 }
 
 export interface Middleware<Req, Res, Err, Options> {
-	error: Interceptors<ErrInterceptor<Err, Res, Req, Options>>;
+  error: Interceptors<ErrInterceptor<Err, Res, Req, Options>>;
-	request: Interceptors<ReqInterceptor<Req, Options>>;
+  request: Interceptors<ReqInterceptor<Req, Options>>;
-	response: Interceptors<ResInterceptor<Res, Req, Options>>;
+  response: Interceptors<ResInterceptor<Res, Req, Options>>;
 }
 
-export const createInterceptors = <Req, Res, Err, Options>(): Middleware<Req, Res, Err, Options> => ({
+export const createInterceptors = <Req, Res, Err, Options>(): Middleware<
-	error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
+  Req,
-	request: new Interceptors<ReqInterceptor<Req, Options>>(),
+  Res,
-	response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
+  Err,
+  Options
+> => ({
+  error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
+  request: new Interceptors<ReqInterceptor<Req, Options>>(),
+  response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
 });
 
 const defaultQuerySerializer = createQuerySerializer({
-	allowReserved: false,
+  allowReserved: false,
-	array: {
+  array: {
-		explode: true,
+    explode: true,
-		style: "form",
+    style: 'form',
-	},
+  },
-	object: {
+  object: {
-		explode: true,
+    explode: true,
-		style: "deepObject",
+    style: 'deepObject',
-	},
+  },
 });
 
 const defaultHeaders = {
-	"Content-Type": "application/json",
+  'Content-Type': 'application/json',
 };
 
 export const createConfig = <T extends ClientOptions = ClientOptions>(
-	override: Config<Omit<ClientOptions, keyof T> & T> = {},
+  override: Config<Omit<ClientOptions, keyof T> & T> = {},
 ): Config<Omit<ClientOptions, keyof T> & T> => ({
-	...jsonBodySerializer,
+  ...jsonBodySerializer,
-	headers: defaultHeaders,
+  headers: defaultHeaders,
-	parseAs: "auto",
+  parseAs: 'auto',
-	querySerializer: defaultQuerySerializer,
+  querySerializer: defaultQuerySerializer,
-	...override,
+  ...override,
 });

app/client/api-client/core/auth.gen.ts

@@ -1,41 +1,42 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
 export type AuthToken = string | undefined;
 
 export interface Auth {
-	/**
+  /**
-	 * Which part of the request do we use to send the auth?
+   * Which part of the request do we use to send the auth?
-	 *
+   *
-	 * @default 'header'
+   * @default 'header'
-	 */
+   */
-	in?: "header" | "query" | "cookie";
+  in?: 'header' | 'query' | 'cookie';
-	/**
+  /**
-	 * Header or query parameter name.
+   * Header or query parameter name.
-	 *
+   *
-	 * @default 'Authorization'
+   * @default 'Authorization'
-	 */
+   */
-	name?: string;
+  name?: string;
-	scheme?: "basic" | "bearer";
+  scheme?: 'basic' | 'bearer';
-	type: "apiKey" | "http";
+  type: 'apiKey' | 'http';
 }
 
 export const getAuthToken = async (
-	auth: Auth,
+  auth: Auth,
-	callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
+  callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
 ): Promise<string | undefined> => {
-	const token = typeof callback === "function" ? await callback(auth) : callback;
+  const token = typeof callback === 'function' ? await callback(auth) : callback;
 
-	if (!token) {
+  if (!token) {
-		return;
+    return;
-	}
+  }
 
-	if (auth.scheme === "bearer") {
+  if (auth.scheme === 'bearer') {
-		return `Bearer ${token}`;
+    return `Bearer ${token}`;
-	}
+  }
 
-	if (auth.scheme === "basic") {
+  if (auth.scheme === 'basic') {
-		return `Basic ${btoa(token)}`;
+    return `Basic ${btoa(token)}`;
-	}
+  }
 
-	return token;
+  return token;
 };

app/client/api-client/core/bodySerializer.gen.ts

@@ -1,82 +1,83 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { ArrayStyle, ObjectStyle, SerializerOptions } from "./pathSerializer.gen";
+import type { ArrayStyle, ObjectStyle, SerializerOptions } from './pathSerializer.gen';
 
 export type QuerySerializer = (query: Record<string, unknown>) => string;
 
-export type BodySerializer = (body: any) => any;
+export type BodySerializer = (body: unknown) => unknown;
 
 type QuerySerializerOptionsObject = {
-	allowReserved?: boolean;
+  allowReserved?: boolean;
-	array?: Partial<SerializerOptions<ArrayStyle>>;
+  array?: Partial<SerializerOptions<ArrayStyle>>;
-	object?: Partial<SerializerOptions<ObjectStyle>>;
+  object?: Partial<SerializerOptions<ObjectStyle>>;
 };
 
 export type QuerySerializerOptions = QuerySerializerOptionsObject & {
-	/**
+  /**
-	 * Per-parameter serialization overrides. When provided, these settings
+   * Per-parameter serialization overrides. When provided, these settings
-	 * override the global array/object settings for specific parameter names.
+   * override the global array/object settings for specific parameter names.
-	 */
+   */
-	parameters?: Record<string, QuerySerializerOptionsObject>;
+  parameters?: Record<string, QuerySerializerOptionsObject>;
 };
 
 const serializeFormDataPair = (data: FormData, key: string, value: unknown): void => {
-	if (typeof value === "string" || value instanceof Blob) {
+  if (typeof value === 'string' || value instanceof Blob) {
-		data.append(key, value);
+    data.append(key, value);
-	} else if (value instanceof Date) {
+  } else if (value instanceof Date) {
-		data.append(key, value.toISOString());
+    data.append(key, value.toISOString());
-	} else {
+  } else {
-		data.append(key, JSON.stringify(value));
+    data.append(key, JSON.stringify(value));
-	}
+  }
 };
 
 const serializeUrlSearchParamsPair = (data: URLSearchParams, key: string, value: unknown): void => {
-	if (typeof value === "string") {
+  if (typeof value === 'string') {
-		data.append(key, value);
+    data.append(key, value);
-	} else {
+  } else {
-		data.append(key, JSON.stringify(value));
+    data.append(key, JSON.stringify(value));
-	}
+  }
 };
 
 export const formDataBodySerializer = {
-	bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(body: T): FormData => {
+  bodySerializer: (body: unknown): FormData => {
-		const data = new FormData();
+    const data = new FormData();
 
-		Object.entries(body).forEach(([key, value]) => {
+    Object.entries(body as Record<string, unknown>).forEach(([key, value]) => {
-			if (value === undefined || value === null) {
+      if (value === undefined || value === null) {
-				return;
+        return;
-			}
+      }
-			if (Array.isArray(value)) {
+      if (Array.isArray(value)) {
-				value.forEach((v) => serializeFormDataPair(data, key, v));
+        value.forEach((v) => serializeFormDataPair(data, key, v));
-			} else {
+      } else {
-				serializeFormDataPair(data, key, value);
+        serializeFormDataPair(data, key, value);
-			}
+      }
-		});
+    });
 
-		return data;
+    return data;
-	},
+  },
 };
 
 export const jsonBodySerializer = {
-	bodySerializer: <T>(body: T): string =>
+  bodySerializer: (body: unknown): string =>
-		JSON.stringify(body, (_key, value) => (typeof value === "bigint" ? value.toString() : value)),
+    JSON.stringify(body, (_key, value) => (typeof value === 'bigint' ? value.toString() : value)),
 };
 
 export const urlSearchParamsBodySerializer = {
-	bodySerializer: <T extends Record<string, any> | Array<Record<string, any>>>(body: T): string => {
+  bodySerializer: (body: unknown): string => {
-		const data = new URLSearchParams();
+    const data = new URLSearchParams();
 
-		Object.entries(body).forEach(([key, value]) => {
+    Object.entries(body as Record<string, unknown>).forEach(([key, value]) => {
-			if (value === undefined || value === null) {
+      if (value === undefined || value === null) {
-				return;
+        return;
-			}
+      }
-			if (Array.isArray(value)) {
+      if (Array.isArray(value)) {
-				value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
+        value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
-			} else {
+      } else {
-				serializeUrlSearchParamsPair(data, key, value);
+        serializeUrlSearchParamsPair(data, key, value);
-			}
+      }
-		});
+    });
 
-		return data.toString();
+    return data.toString();
-	},
+  },
 };

app/client/api-client/core/params.gen.ts

@@ -1,169 +1,170 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-type Slot = "body" | "headers" | "path" | "query";
+type Slot = 'body' | 'headers' | 'path' | 'query';
 
 export type Field =
-	| {
+  | {
-			in: Exclude<Slot, "body">;
+      in: Exclude<Slot, 'body'>;
-			/**
+      /**
-			 * Field name. This is the name we want the user to see and use.
+       * Field name. This is the name we want the user to see and use.
-			 */
+       */
-			key: string;
+      key: string;
-			/**
+      /**
-			 * Field mapped name. This is the name we want to use in the request.
+       * Field mapped name. This is the name we want to use in the request.
-			 * If omitted, we use the same value as `key`.
+       * If omitted, we use the same value as `key`.
-			 */
+       */
-			map?: string;
+      map?: string;
-	  }
+    }
-	| {
+  | {
-			in: Extract<Slot, "body">;
+      in: Extract<Slot, 'body'>;
-			/**
+      /**
-			 * Key isn't required for bodies.
+       * Key isn't required for bodies.
-			 */
+       */
-			key?: string;
+      key?: string;
-			map?: string;
+      map?: string;
-	  }
+    }
-	| {
+  | {
-			/**
+      /**
-			 * Field name. This is the name we want the user to see and use.
+       * Field name. This is the name we want the user to see and use.
-			 */
+       */
-			key: string;
+      key: string;
-			/**
+      /**
-			 * Field mapped name. This is the name we want to use in the request.
+       * Field mapped name. This is the name we want to use in the request.
-			 * If `in` is omitted, `map` aliases `key` to the transport layer.
+       * If `in` is omitted, `map` aliases `key` to the transport layer.
-			 */
+       */
-			map: Slot;
+      map: Slot;
-	  };
+    };
 
 export interface Fields {
-	allowExtra?: Partial<Record<Slot, boolean>>;
+  allowExtra?: Partial<Record<Slot, boolean>>;
-	args?: ReadonlyArray<Field>;
+  args?: ReadonlyArray<Field>;
 }
 
 export type FieldsConfig = ReadonlyArray<Field | Fields>;
 
 const extraPrefixesMap: Record<string, Slot> = {
-	$body_: "body",
+  $body_: 'body',
-	$headers_: "headers",
+  $headers_: 'headers',
-	$path_: "path",
+  $path_: 'path',
-	$query_: "query",
+  $query_: 'query',
 };
 const extraPrefixes = Object.entries(extraPrefixesMap);
 
 type KeyMap = Map<
-	string,
+  string,
-	| {
+  | {
-			in: Slot;
+      in: Slot;
-			map?: string;
+      map?: string;
-	  }
+    }
-	| {
+  | {
-			in?: never;
+      in?: never;
-			map: Slot;
+      map: Slot;
-	  }
+    }
 >;
 
 const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
-	if (!map) {
+  if (!map) {
-		map = new Map();
+    map = new Map();
-	}
+  }
 
-	for (const config of fields) {
+  for (const config of fields) {
-		if ("in" in config) {
+    if ('in' in config) {
-			if (config.key) {
+      if (config.key) {
-				map.set(config.key, {
+        map.set(config.key, {
-					in: config.in,
+          in: config.in,
-					map: config.map,
+          map: config.map,
-				});
+        });
-			}
+      }
-		} else if ("key" in config) {
+    } else if ('key' in config) {
-			map.set(config.key, {
+      map.set(config.key, {
-				map: config.map,
+        map: config.map,
-			});
+      });
-		} else if (config.args) {
+    } else if (config.args) {
-			buildKeyMap(config.args, map);
+      buildKeyMap(config.args, map);
-		}
+    }
-	}
+  }
 
-	return map;
+  return map;
 };
 
 interface Params {
-	body: unknown;
+  body: unknown;
-	headers: Record<string, unknown>;
+  headers: Record<string, unknown>;
-	path: Record<string, unknown>;
+  path: Record<string, unknown>;
-	query: Record<string, unknown>;
+  query: Record<string, unknown>;
 }
 
 const stripEmptySlots = (params: Params) => {
-	for (const [slot, value] of Object.entries(params)) {
+  for (const [slot, value] of Object.entries(params)) {
-		if (value && typeof value === "object" && !Object.keys(value).length) {
+    if (value && typeof value === 'object' && !Array.isArray(value) && !Object.keys(value).length) {
-			delete params[slot as Slot];
+      delete params[slot as Slot];
-		}
+    }
-	}
+  }
 };
 
 export const buildClientParams = (args: ReadonlyArray<unknown>, fields: FieldsConfig) => {
-	const params: Params = {
+  const params: Params = {
-		body: {},
+    body: {},
-		headers: {},
+    headers: {},
-		path: {},
+    path: {},
-		query: {},
+    query: {},
-	};
+  };
 
-	const map = buildKeyMap(fields);
+  const map = buildKeyMap(fields);
 
-	let config: FieldsConfig[number] | undefined;
+  let config: FieldsConfig[number] | undefined;
 
-	for (const [index, arg] of args.entries()) {
+  for (const [index, arg] of args.entries()) {
-		if (fields[index]) {
+    if (fields[index]) {
-			config = fields[index];
+      config = fields[index];
-		}
+    }
 
-		if (!config) {
+    if (!config) {
-			continue;
+      continue;
-		}
+    }
 
-		if ("in" in config) {
+    if ('in' in config) {
-			if (config.key) {
+      if (config.key) {
-				const field = map.get(config.key)!;
+        const field = map.get(config.key)!;
-				const name = field.map || config.key;
+        const name = field.map || config.key;
-				if (field.in) {
+        if (field.in) {
-					(params[field.in] as Record<string, unknown>)[name] = arg;
+          (params[field.in] as Record<string, unknown>)[name] = arg;
-				}
+        }
-			} else {
+      } else {
-				params.body = arg;
+        params.body = arg;
-			}
+      }
-		} else {
+    } else {
-			for (const [key, value] of Object.entries(arg ?? {})) {
+      for (const [key, value] of Object.entries(arg ?? {})) {
-				const field = map.get(key);
+        const field = map.get(key);
 
-				if (field) {
+        if (field) {
-					if (field.in) {
+          if (field.in) {
-						const name = field.map || key;
+            const name = field.map || key;
-						(params[field.in] as Record<string, unknown>)[name] = value;
+            (params[field.in] as Record<string, unknown>)[name] = value;
-					} else {
+          } else {
-						params[field.map] = value;
+            params[field.map] = value;
-					}
+          }
-				} else {
+        } else {
-					const extra = extraPrefixes.find(([prefix]) => key.startsWith(prefix));
+          const extra = extraPrefixes.find(([prefix]) => key.startsWith(prefix));
 
-					if (extra) {
+          if (extra) {
-						const [prefix, slot] = extra;
+            const [prefix, slot] = extra;
-						(params[slot] as Record<string, unknown>)[key.slice(prefix.length)] = value;
+            (params[slot] as Record<string, unknown>)[key.slice(prefix.length)] = value;
-					} else if ("allowExtra" in config && config.allowExtra) {
+          } else if ('allowExtra' in config && config.allowExtra) {
-						for (const [slot, allowed] of Object.entries(config.allowExtra)) {
+            for (const [slot, allowed] of Object.entries(config.allowExtra)) {
-							if (allowed) {
+              if (allowed) {
-								(params[slot as Slot] as Record<string, unknown>)[key] = value;
+                (params[slot as Slot] as Record<string, unknown>)[key] = value;
-								break;
+                break;
-							}
+              }
-						}
+            }
-					}
+          }
-				}
+        }
-			}
+      }
-		}
+    }
-	}
+  }
 
-	stripEmptySlots(params);
+  stripEmptySlots(params);
 
-	return params;
+  return params;
 };

app/client/api-client/core/pathSerializer.gen.ts

@@ -1,167 +1,172 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
 interface SerializeOptions<T> extends SerializePrimitiveOptions, SerializerOptions<T> {}
 
 interface SerializePrimitiveOptions {
-	allowReserved?: boolean;
+  allowReserved?: boolean;
-	name: string;
+  name: string;
 }
 
 export interface SerializerOptions<T> {
-	/**
+  /**
-	 * @default true
+   * @default true
-	 */
+   */
-	explode: boolean;
+  explode: boolean;
-	style: T;
+  style: T;
 }
 
-export type ArrayStyle = "form" | "spaceDelimited" | "pipeDelimited";
+export type ArrayStyle = 'form' | 'spaceDelimited' | 'pipeDelimited';
 export type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
-type MatrixStyle = "label" | "matrix" | "simple";
+type MatrixStyle = 'label' | 'matrix' | 'simple';
-export type ObjectStyle = "form" | "deepObject";
+export type ObjectStyle = 'form' | 'deepObject';
 type ObjectSeparatorStyle = ObjectStyle | MatrixStyle;
 
 interface SerializePrimitiveParam extends SerializePrimitiveOptions {
-	value: string;
+  value: string;
 }
 
 export const separatorArrayExplode = (style: ArraySeparatorStyle) => {
-	switch (style) {
+  switch (style) {
-		case "label":
+    case 'label':
-			return ".";
+      return '.';
-		case "matrix":
+    case 'matrix':
-			return ";";
+      return ';';
-		case "simple":
+    case 'simple':
-			return ",";
+      return ',';
-		default:
+    default:
-			return "&";
+      return '&';
-	}
+  }
 };
 
 export const separatorArrayNoExplode = (style: ArraySeparatorStyle) => {
-	switch (style) {
+  switch (style) {
-		case "form":
+    case 'form':
-			return ",";
+      return ',';
-		case "pipeDelimited":
+    case 'pipeDelimited':
-			return "|";
+      return '|';
-		case "spaceDelimited":
+    case 'spaceDelimited':
-			return "%20";
+      return '%20';
-		default:
+    default:
-			return ",";
+      return ',';
-	}
+  }
 };
 
 export const separatorObjectExplode = (style: ObjectSeparatorStyle) => {
-	switch (style) {
+  switch (style) {
-		case "label":
+    case 'label':
-			return ".";
+      return '.';
-		case "matrix":
+    case 'matrix':
-			return ";";
+      return ';';
-		case "simple":
+    case 'simple':
-			return ",";
+      return ',';
-		default:
+    default:
-			return "&";
+      return '&';
-	}
+  }
 };
 
 export const serializeArrayParam = ({
-	allowReserved,
+  allowReserved,
-	explode,
+  explode,
-	name,
+  name,
-	style,
+  style,
-	value,
+  value,
 }: SerializeOptions<ArraySeparatorStyle> & {
-	value: unknown[];
+  value: unknown[];
 }) => {
-	if (!explode) {
+  if (!explode) {
-		const joinedValues = (allowReserved ? value : value.map((v) => encodeURIComponent(v as string))).join(
+    const joinedValues = (
-			separatorArrayNoExplode(style),
+      allowReserved ? value : value.map((v) => encodeURIComponent(v as string))
-		);
+    ).join(separatorArrayNoExplode(style));
-		switch (style) {
+    switch (style) {
-			case "label":
+      case 'label':
-				return `.${joinedValues}`;
+        return `.${joinedValues}`;
-			case "matrix":
+      case 'matrix':
-				return `;${name}=${joinedValues}`;
+        return `;${name}=${joinedValues}`;
-			case "simple":
+      case 'simple':
-				return joinedValues;
+        return joinedValues;
-			default:
+      default:
-				return `${name}=${joinedValues}`;
+        return `${name}=${joinedValues}`;
-		}
+    }
-	}
+  }
 
-	const separator = separatorArrayExplode(style);
+  const separator = separatorArrayExplode(style);
-	const joinedValues = value
+  const joinedValues = value
-		.map((v) => {
+    .map((v) => {
-			if (style === "label" || style === "simple") {
+      if (style === 'label' || style === 'simple') {
-				return allowReserved ? v : encodeURIComponent(v as string);
+        return allowReserved ? v : encodeURIComponent(v as string);
-			}
+      }
 
-			return serializePrimitiveParam({
+      return serializePrimitiveParam({
-				allowReserved,
+        allowReserved,
-				name,
+        name,
-				value: v as string,
+        value: v as string,
-			});
+      });
-		})
+    })
-		.join(separator);
+    .join(separator);
-	return style === "label" || style === "matrix" ? separator + joinedValues : joinedValues;
+  return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
 };
 
-export const serializePrimitiveParam = ({ allowReserved, name, value }: SerializePrimitiveParam) => {
+export const serializePrimitiveParam = ({
-	if (value === undefined || value === null) {
+  allowReserved,
-		return "";
+  name,
-	}
+  value,
+}: SerializePrimitiveParam) => {
+  if (value === undefined || value === null) {
+    return '';
+  }
 
-	if (typeof value === "object") {
+  if (typeof value === 'object') {
-		throw new Error(
+    throw new Error(
-			"Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.",
+      'Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.',
-		);
+    );
-	}
+  }
 
-	return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
+  return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
 };
 
 export const serializeObjectParam = ({
-	allowReserved,
+  allowReserved,
-	explode,
+  explode,
-	name,
+  name,
-	style,
+  style,
-	value,
+  value,
-	valueOnly,
+  valueOnly,
 }: SerializeOptions<ObjectSeparatorStyle> & {
-	value: Record<string, unknown> | Date;
+  value: Record<string, unknown> | Date;
-	valueOnly?: boolean;
+  valueOnly?: boolean;
 }) => {
-	if (value instanceof Date) {
+  if (value instanceof Date) {
-		return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
+    return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
-	}
+  }
 
-	if (style !== "deepObject" && !explode) {
+  if (style !== 'deepObject' && !explode) {
-		let values: string[] = [];
+    let values: string[] = [];
-		Object.entries(value).forEach(([key, v]) => {
+    Object.entries(value).forEach(([key, v]) => {
-			values = [...values, key, allowReserved ? (v as string) : encodeURIComponent(v as string)];
+      values = [...values, key, allowReserved ? (v as string) : encodeURIComponent(v as string)];
-		});
+    });
-		const joinedValues = values.join(",");
+    const joinedValues = values.join(',');
-		switch (style) {
+    switch (style) {
-			case "form":
+      case 'form':
-				return `${name}=${joinedValues}`;
+        return `${name}=${joinedValues}`;
-			case "label":
+      case 'label':
-				return `.${joinedValues}`;
+        return `.${joinedValues}`;
-			case "matrix":
+      case 'matrix':
-				return `;${name}=${joinedValues}`;
+        return `;${name}=${joinedValues}`;
-			default:
+      default:
-				return joinedValues;
+        return joinedValues;
-		}
+    }
-	}
+  }
 
-	const separator = separatorObjectExplode(style);
+  const separator = separatorObjectExplode(style);
-	const joinedValues = Object.entries(value)
+  const joinedValues = Object.entries(value)
-		.map(([key, v]) =>
+    .map(([key, v]) =>
-			serializePrimitiveParam({
+      serializePrimitiveParam({
-				allowReserved,
+        allowReserved,
-				name: style === "deepObject" ? `${name}[${key}]` : key,
+        name: style === 'deepObject' ? `${name}[${key}]` : key,
-				value: v as string,
+        value: v as string,
-			}),
+      }),
-		)
+    )
-		.join(separator);
+    .join(separator);
-	return style === "label" || style === "matrix" ? separator + joinedValues : joinedValues;
+  return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
 };

app/client/api-client/core/queryKeySerializer.gen.ts

@@ -1,111 +1,118 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
 /**
  * JSON-friendly union that mirrors what Pinia Colada can hash.
  */
-export type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
+export type JsonValue =
+  | null
+  | string
+  | number
+  | boolean
+  | JsonValue[]
+  | { [key: string]: JsonValue };
 
 /**
  * Replacer that converts non-JSON values (bigint, Date, etc.) to safe substitutes.
  */
 export const queryKeyJsonReplacer = (_key: string, value: unknown) => {
-	if (value === undefined || typeof value === "function" || typeof value === "symbol") {
+  if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
-		return undefined;
+    return undefined;
-	}
+  }
-	if (typeof value === "bigint") {
+  if (typeof value === 'bigint') {
-		return value.toString();
+    return value.toString();
-	}
+  }
-	if (value instanceof Date) {
+  if (value instanceof Date) {
-		return value.toISOString();
+    return value.toISOString();
-	}
+  }
-	return value;
+  return value;
 };
 
 /**
  * Safely stringifies a value and parses it back into a JsonValue.
  */
 export const stringifyToJsonValue = (input: unknown): JsonValue | undefined => {
-	try {
+  try {
-		const json = JSON.stringify(input, queryKeyJsonReplacer);
+    const json = JSON.stringify(input, queryKeyJsonReplacer);
-		if (json === undefined) {
+    if (json === undefined) {
-			return undefined;
+      return undefined;
-		}
+    }
-		return JSON.parse(json) as JsonValue;
+    return JSON.parse(json) as JsonValue;
-	} catch {
+  } catch {
-		return undefined;
+    return undefined;
-	}
+  }
 };
 
 /**
  * Detects plain objects (including objects with a null prototype).
  */
 const isPlainObject = (value: unknown): value is Record<string, unknown> => {
-	if (value === null || typeof value !== "object") {
+  if (value === null || typeof value !== 'object') {
-		return false;
+    return false;
-	}
+  }
-	const prototype = Object.getPrototypeOf(value as object);
+  const prototype = Object.getPrototypeOf(value as object);
-	return prototype === Object.prototype || prototype === null;
+  return prototype === Object.prototype || prototype === null;
 };
 
 /**
  * Turns URLSearchParams into a sorted JSON object for deterministic keys.
  */
 const serializeSearchParams = (params: URLSearchParams): JsonValue => {
-	const entries = Array.from(params.entries()).sort(([a], [b]) => a.localeCompare(b));
+  const entries = Array.from(params.entries()).sort(([a], [b]) => a.localeCompare(b));
-	const result: Record<string, JsonValue> = {};
+  const result: Record<string, JsonValue> = {};
 
-	for (const [key, value] of entries) {
+  for (const [key, value] of entries) {
-		const existing = result[key];
+    const existing = result[key];
-		if (existing === undefined) {
+    if (existing === undefined) {
-			result[key] = value;
+      result[key] = value;
-			continue;
+      continue;
-		}
+    }
 
-		if (Array.isArray(existing)) {
+    if (Array.isArray(existing)) {
-			(existing as string[]).push(value);
+      (existing as string[]).push(value);
-		} else {
+    } else {
-			result[key] = [existing, value];
+      result[key] = [existing, value];
-		}
+    }
-	}
+  }
 
-	return result;
+  return result;
 };
 
 /**
  * Normalizes any accepted value into a JSON-friendly shape for query keys.
  */
 export const serializeQueryKeyValue = (value: unknown): JsonValue | undefined => {
-	if (value === null) {
+  if (value === null) {
-		return null;
+    return null;
-	}
+  }
 
-	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-		return value;
+    return value;
-	}
+  }
 
-	if (value === undefined || typeof value === "function" || typeof value === "symbol") {
+  if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
-		return undefined;
+    return undefined;
-	}
+  }
 
-	if (typeof value === "bigint") {
+  if (typeof value === 'bigint') {
-		return value.toString();
+    return value.toString();
-	}
+  }
 
-	if (value instanceof Date) {
+  if (value instanceof Date) {
-		return value.toISOString();
+    return value.toISOString();
-	}
+  }
 
-	if (Array.isArray(value)) {
+  if (Array.isArray(value)) {
-		return stringifyToJsonValue(value);
+    return stringifyToJsonValue(value);
-	}
+  }
 
-	if (typeof URLSearchParams !== "undefined" && value instanceof URLSearchParams) {
+  if (typeof URLSearchParams !== 'undefined' && value instanceof URLSearchParams) {
-		return serializeSearchParams(value);
+    return serializeSearchParams(value);
-	}
+  }
 
-	if (isPlainObject(value)) {
+  if (isPlainObject(value)) {
-		return stringifyToJsonValue(value);
+    return stringifyToJsonValue(value);
-	}
+  }
 
-	return undefined;
+  return undefined;
 };

app/client/api-client/core/serverSentEvents.gen.ts

@@ -1,239 +1,243 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { Config } from "./types.gen";
+import type { Config } from './types.gen';
 
-export type ServerSentEventsOptions<TData = unknown> = Omit<RequestInit, "method"> &
+export type ServerSentEventsOptions<TData = unknown> = Omit<RequestInit, 'method'> &
-	Pick<Config, "method" | "responseTransformer" | "responseValidator"> & {
+  Pick<Config, 'method' | 'responseTransformer' | 'responseValidator'> & {
-		/**
+    /**
-		 * Fetch API implementation. You can use this option to provide a custom
+     * Fetch API implementation. You can use this option to provide a custom
-		 * fetch instance.
+     * fetch instance.
-		 *
+     *
-		 * @default globalThis.fetch
+     * @default globalThis.fetch
-		 */
+     */
-		fetch?: typeof fetch;
+    fetch?: typeof fetch;
-		/**
+    /**
-		 * Implementing clients can call request interceptors inside this hook.
+     * Implementing clients can call request interceptors inside this hook.
-		 */
+     */
-		onRequest?: (url: string, init: RequestInit) => Promise<Request>;
+    onRequest?: (url: string, init: RequestInit) => Promise<Request>;
-		/**
+    /**
-		 * Callback invoked when a network or parsing error occurs during streaming.
+     * Callback invoked when a network or parsing error occurs during streaming.
-		 *
+     *
-		 * This option applies only if the endpoint returns a stream of events.
+     * This option applies only if the endpoint returns a stream of events.
-		 *
+     *
-		 * @param error The error that occurred.
+     * @param error The error that occurred.
-		 */
+     */
-		onSseError?: (error: unknown) => void;
+    onSseError?: (error: unknown) => void;
-		/**
+    /**
-		 * Callback invoked when an event is streamed from the server.
+     * Callback invoked when an event is streamed from the server.
-		 *
+     *
-		 * This option applies only if the endpoint returns a stream of events.
+     * This option applies only if the endpoint returns a stream of events.
-		 *
+     *
-		 * @param event Event streamed from the server.
+     * @param event Event streamed from the server.
-		 * @returns Nothing (void).
+     * @returns Nothing (void).
-		 */
+     */
-		onSseEvent?: (event: StreamEvent<TData>) => void;
+    onSseEvent?: (event: StreamEvent<TData>) => void;
-		serializedBody?: RequestInit["body"];
+    serializedBody?: RequestInit['body'];
-		/**
+    /**
-		 * Default retry delay in milliseconds.
+     * Default retry delay in milliseconds.
-		 *
+     *
-		 * This option applies only if the endpoint returns a stream of events.
+     * This option applies only if the endpoint returns a stream of events.
-		 *
+     *
-		 * @default 3000
+     * @default 3000
-		 */
+     */
-		sseDefaultRetryDelay?: number;
+    sseDefaultRetryDelay?: number;
-		/**
+    /**
-		 * Maximum number of retry attempts before giving up.
+     * Maximum number of retry attempts before giving up.
-		 */
+     */
-		sseMaxRetryAttempts?: number;
+    sseMaxRetryAttempts?: number;
-		/**
+    /**
-		 * Maximum retry delay in milliseconds.
+     * Maximum retry delay in milliseconds.
-		 *
+     *
-		 * Applies only when exponential backoff is used.
+     * Applies only when exponential backoff is used.
-		 *
+     *
-		 * This option applies only if the endpoint returns a stream of events.
+     * This option applies only if the endpoint returns a stream of events.
-		 *
+     *
-		 * @default 30000
+     * @default 30000
-		 */
+     */
-		sseMaxRetryDelay?: number;
+    sseMaxRetryDelay?: number;
-		/**
+    /**
-		 * Optional sleep function for retry backoff.
+     * Optional sleep function for retry backoff.
-		 *
+     *
-		 * Defaults to using `setTimeout`.
+     * Defaults to using `setTimeout`.
-		 */
+     */
-		sseSleepFn?: (ms: number) => Promise<void>;
+    sseSleepFn?: (ms: number) => Promise<void>;
-		url: string;
+    url: string;
-	};
+  };
 
 export interface StreamEvent<TData = unknown> {
-	data: TData;
+  data: TData;
-	event?: string;
+  event?: string;
-	id?: string;
+  id?: string;
-	retry?: number;
+  retry?: number;
 }
 
 export type ServerSentEventsResult<TData = unknown, TReturn = void, TNext = unknown> = {
-	stream: AsyncGenerator<TData extends Record<string, unknown> ? TData[keyof TData] : TData, TReturn, TNext>;
+  stream: AsyncGenerator<
+    TData extends Record<string, unknown> ? TData[keyof TData] : TData,
+    TReturn,
+    TNext
+  >;
 };
 
-export const createSseClient = <TData = unknown>({
+export function createSseClient<TData = unknown>({
-	onRequest,
+  onRequest,
-	onSseError,
+  onSseError,
-	onSseEvent,
+  onSseEvent,
-	responseTransformer,
+  responseTransformer,
-	responseValidator,
+  responseValidator,
-	sseDefaultRetryDelay,
+  sseDefaultRetryDelay,
-	sseMaxRetryAttempts,
+  sseMaxRetryAttempts,
-	sseMaxRetryDelay,
+  sseMaxRetryDelay,
-	sseSleepFn,
+  sseSleepFn,
-	url,
+  url,
-	...options
+  ...options
-}: ServerSentEventsOptions): ServerSentEventsResult<TData> => {
+}: ServerSentEventsOptions): ServerSentEventsResult<TData> {
-	let lastEventId: string | undefined;
+  let lastEventId: string | undefined;
 
-	const sleep = sseSleepFn ?? ((ms: number) => new Promise((resolve) => setTimeout(resolve, ms)));
+  const sleep = sseSleepFn ?? ((ms: number) => new Promise((resolve) => setTimeout(resolve, ms)));
 
-	const createStream = async function* () {
+  const createStream = async function* () {
-		let retryDelay: number = sseDefaultRetryDelay ?? 3000;
+    let retryDelay: number = sseDefaultRetryDelay ?? 3000;
-		let attempt = 0;
+    let attempt = 0;
-		const signal = options.signal ?? new AbortController().signal;
+    const signal = options.signal ?? new AbortController().signal;
 
-		while (true) {
+    while (true) {
-			if (signal.aborted) break;
+      if (signal.aborted) break;
 
-			attempt++;
+      attempt++;
 
-			const headers =
+      const headers =
-				options.headers instanceof Headers
+        options.headers instanceof Headers
-					? options.headers
+          ? options.headers
-					: new Headers(options.headers as Record<string, string> | undefined);
+          : new Headers(options.headers as Record<string, string> | undefined);
 
-			if (lastEventId !== undefined) {
+      if (lastEventId !== undefined) {
-				headers.set("Last-Event-ID", lastEventId);
+        headers.set('Last-Event-ID', lastEventId);
-			}
+      }
 
-			try {
+      try {
-				const requestInit: RequestInit = {
+        const requestInit: RequestInit = {
-					redirect: "follow",
+          redirect: 'follow',
-					...options,
+          ...options,
-					body: options.serializedBody,
+          body: options.serializedBody,
-					headers,
+          headers,
-					signal,
+          signal,
-				};
+        };
-				let request = new Request(url, requestInit);
+        let request = new Request(url, requestInit);
-				if (onRequest) {
+        if (onRequest) {
-					request = await onRequest(url, requestInit);
+          request = await onRequest(url, requestInit);
-				}
+        }
-				// fetch must be assigned here, otherwise it would throw the error:
+        // fetch must be assigned here, otherwise it would throw the error:
-				// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
+        // TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
-				const _fetch = options.fetch ?? globalThis.fetch;
+        const _fetch = options.fetch ?? globalThis.fetch;
-				const response = await _fetch(request);
+        const response = await _fetch(request);
 
-				if (!response.ok) throw new Error(`SSE failed: ${response.status} ${response.statusText}`);
+        if (!response.ok) throw new Error(`SSE failed: ${response.status} ${response.statusText}`);
 
-				if (!response.body) throw new Error("No body in SSE response");
+        if (!response.body) throw new Error('No body in SSE response');
 
-				const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+        const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
 
-				let buffer = "";
+        let buffer = '';
 
-				const abortHandler = () => {
+        const abortHandler = () => {
-					try {
+          try {
-						reader.cancel();
+            reader.cancel();
-					} catch {
+          } catch {
-						// noop
+            // noop
-					}
+          }
-				};
+        };
 
-				signal.addEventListener("abort", abortHandler);
+        signal.addEventListener('abort', abortHandler);
 
-				try {
+        try {
-					while (true) {
+          while (true) {
-						const { done, value } = await reader.read();
+            const { done, value } = await reader.read();
-						if (done) break;
+            if (done) break;
-						buffer += value;
+            buffer += value;
-						// Normalize line endings: CRLF -> LF, then CR -> LF
+            buffer = buffer.replace(/\r\n?/g, '\n'); // normalize line endings
-						buffer = buffer.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
 
-						const chunks = buffer.split("\n\n");
+            const chunks = buffer.split('\n\n');
-						buffer = chunks.pop() ?? "";
+            buffer = chunks.pop() ?? '';
 
-						for (const chunk of chunks) {
+            for (const chunk of chunks) {
-							const lines = chunk.split("\n");
+              const lines = chunk.split('\n');
-							const dataLines: Array<string> = [];
+              const dataLines: Array<string> = [];
-							let eventName: string | undefined;
+              let eventName: string | undefined;
 
-							for (const line of lines) {
+              for (const line of lines) {
-								if (line.startsWith("data:")) {
+                if (line.startsWith('data:')) {
-									dataLines.push(line.replace(/^data:\s*/, ""));
+                  dataLines.push(line.replace(/^data:\s*/, ''));
-								} else if (line.startsWith("event:")) {
+                } else if (line.startsWith('event:')) {
-									eventName = line.replace(/^event:\s*/, "");
+                  eventName = line.replace(/^event:\s*/, '');
-								} else if (line.startsWith("id:")) {
+                } else if (line.startsWith('id:')) {
-									lastEventId = line.replace(/^id:\s*/, "");
+                  lastEventId = line.replace(/^id:\s*/, '');
-								} else if (line.startsWith("retry:")) {
+                } else if (line.startsWith('retry:')) {
-									const parsed = Number.parseInt(line.replace(/^retry:\s*/, ""), 10);
+                  const parsed = Number.parseInt(line.replace(/^retry:\s*/, ''), 10);
-									if (!Number.isNaN(parsed)) {
+                  if (!Number.isNaN(parsed)) {
-										retryDelay = parsed;
+                    retryDelay = parsed;
-									}
+                  }
-								}
+                }
-							}
+              }
 
-							let data: unknown;
+              let data: unknown;
-							let parsedJson = false;
+              let parsedJson = false;
 
-							if (dataLines.length) {
+              if (dataLines.length) {
-								const rawData = dataLines.join("\n");
+                const rawData = dataLines.join('\n');
-								try {
+                try {
-									data = JSON.parse(rawData);
+                  data = JSON.parse(rawData);
-									parsedJson = true;
+                  parsedJson = true;
-								} catch {
+                } catch {
-									data = rawData;
+                  data = rawData;
-								}
+                }
-							}
+              }
 
-							if (parsedJson) {
+              if (parsedJson) {
-								if (responseValidator) {
+                if (responseValidator) {
-									await responseValidator(data);
+                  await responseValidator(data);
-								}
+                }
 
-								if (responseTransformer) {
+                if (responseTransformer) {
-									data = await responseTransformer(data);
+                  data = await responseTransformer(data);
-								}
+                }
-							}
+              }
 
-							onSseEvent?.({
+              onSseEvent?.({
-								data,
+                data,
-								event: eventName,
+                event: eventName,
-								id: lastEventId,
+                id: lastEventId,
-								retry: retryDelay,
+                retry: retryDelay,
-							});
+              });
 
-							if (dataLines.length) {
+              if (dataLines.length) {
-								yield data as any;
+                yield data as any;
-							}
+              }
-						}
+            }
-					}
+          }
-				} finally {
+        } finally {
-					signal.removeEventListener("abort", abortHandler);
+          signal.removeEventListener('abort', abortHandler);
-					reader.releaseLock();
+          reader.releaseLock();
-				}
+        }
 
-				break; // exit loop on normal completion
+        break; // exit loop on normal completion
-			} catch (error) {
+      } catch (error) {
-				// connection failed or aborted; retry after delay
+        // connection failed or aborted; retry after delay
-				onSseError?.(error);
+        onSseError?.(error);
 
-				if (sseMaxRetryAttempts !== undefined && attempt >= sseMaxRetryAttempts) {
+        if (sseMaxRetryAttempts !== undefined && attempt >= sseMaxRetryAttempts) {
-					break; // stop after firing error
+          break; // stop after firing error
-				}
+        }
 
-				// exponential backoff: double retry each attempt, cap at 30s
+        // exponential backoff: double retry each attempt, cap at 30s
-				const backoff = Math.min(retryDelay * 2 ** (attempt - 1), sseMaxRetryDelay ?? 30000);
+        const backoff = Math.min(retryDelay * 2 ** (attempt - 1), sseMaxRetryDelay ?? 30000);
-				await sleep(backoff);
+        await sleep(backoff);
-			}
+      }
-		}
+    }
-	};
+  };
 
-	const stream = createStream();
+  const stream = createStream();
 
-	return { stream };
+  return { stream };
-};
+}

app/client/api-client/core/types.gen.ts

@@ -1,86 +1,105 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { Auth, AuthToken } from "./auth.gen";
+import type { Auth, AuthToken } from './auth.gen';
-import type { BodySerializer, QuerySerializer, QuerySerializerOptions } from "./bodySerializer.gen";
+import type { BodySerializer, QuerySerializer, QuerySerializerOptions } from './bodySerializer.gen';
 
-export type HttpMethod = "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+export type HttpMethod =
+  | 'connect'
+  | 'delete'
+  | 'get'
+  | 'head'
+  | 'options'
+  | 'patch'
+  | 'post'
+  | 'put'
+  | 'trace';
 
-export type Client<RequestFn = never, Config = unknown, MethodFn = never, BuildUrlFn = never, SseFn = never> = {
+export type Client<
-	/**
+  RequestFn = never,
-	 * Returns the final request URL.
+  Config = unknown,
-	 */
+  MethodFn = never,
-	buildUrl: BuildUrlFn;
+  BuildUrlFn = never,
-	getConfig: () => Config;
+  SseFn = never,
-	request: RequestFn;
+> = {
-	setConfig: (config: Config) => Config;
+  /**
+   * Returns the final request URL.
+   */
+  buildUrl: BuildUrlFn;
+  getConfig: () => Config;
+  request: RequestFn;
+  setConfig: (config: Config) => Config;
 } & {
-	[K in HttpMethod]: MethodFn;
+  [K in HttpMethod]: MethodFn;
 } & ([SseFn] extends [never] ? { sse?: never } : { sse: { [K in HttpMethod]: SseFn } });
 
 export interface Config {
-	/**
+  /**
-	 * Auth token or a function returning auth token. The resolved value will be
+   * Auth token or a function returning auth token. The resolved value will be
-	 * added to the request payload as defined by its `security` array.
+   * added to the request payload as defined by its `security` array.
-	 */
+   */
-	auth?: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken;
+  auth?: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken;
-	/**
+  /**
-	 * A function for serializing request body parameter. By default,
+   * A function for serializing request body parameter. By default,
-	 * {@link JSON.stringify()} will be used.
+   * {@link JSON.stringify()} will be used.
-	 */
+   */
-	bodySerializer?: BodySerializer | null;
+  bodySerializer?: BodySerializer | null;
-	/**
+  /**
-	 * An object containing any HTTP headers that you want to pre-populate your
+   * An object containing any HTTP headers that you want to pre-populate your
-	 * `Headers` object with.
+   * `Headers` object with.
-	 *
+   *
-	 * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
+   * {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
-	 */
+   */
-	headers?:
+  headers?:
-		| RequestInit["headers"]
+    | RequestInit['headers']
-		| Record<string, string | number | boolean | (string | number | boolean)[] | null | undefined | unknown>;
+    | Record<
-	/**
+        string,
-	 * The request method.
+        string | number | boolean | (string | number | boolean)[] | null | undefined | unknown
-	 *
+      >;
-	 * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
+  /**
-	 */
+   * The request method.
-	method?: Uppercase<HttpMethod>;
+   *
-	/**
+   * {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
-	 * A function for serializing request query parameters. By default, arrays
+   */
-	 * will be exploded in form style, objects will be exploded in deepObject
+  method?: Uppercase<HttpMethod>;
-	 * style, and reserved characters are percent-encoded.
+  /**
-	 *
+   * A function for serializing request query parameters. By default, arrays
-	 * This method will have no effect if the native `paramsSerializer()` Axios
+   * will be exploded in form style, objects will be exploded in deepObject
-	 * API function is used.
+   * style, and reserved characters are percent-encoded.
-	 *
+   *
-	 * {@link https://swagger.io/docs/specification/serialization/#query View examples}
+   * This method will have no effect if the native `paramsSerializer()` Axios
-	 */
+   * API function is used.
-	querySerializer?: QuerySerializer | QuerySerializerOptions;
+   *
-	/**
+   * {@link https://swagger.io/docs/specification/serialization/#query View examples}
-	 * A function validating request data. This is useful if you want to ensure
+   */
-	 * the request conforms to the desired shape, so it can be safely sent to
+  querySerializer?: QuerySerializer | QuerySerializerOptions;
-	 * the server.
+  /**
-	 */
+   * A function validating request data. This is useful if you want to ensure
-	requestValidator?: (data: unknown) => Promise<unknown>;
+   * the request conforms to the desired shape, so it can be safely sent to
-	/**
+   * the server.
-	 * A function transforming response data before it's returned. This is useful
+   */
-	 * for post-processing data, e.g. converting ISO strings into Date objects.
+  requestValidator?: (data: unknown) => Promise<unknown>;
-	 */
+  /**
-	responseTransformer?: (data: unknown) => Promise<unknown>;
+   * A function transforming response data before it's returned. This is useful
-	/**
+   * for post-processing data, e.g., converting ISO strings into Date objects.
-	 * A function validating response data. This is useful if you want to ensure
+   */
-	 * the response conforms to the desired shape, so it can be safely passed to
+  responseTransformer?: (data: unknown) => Promise<unknown>;
-	 * the transformers and returned to the user.
+  /**
-	 */
+   * A function validating response data. This is useful if you want to ensure
-	responseValidator?: (data: unknown) => Promise<unknown>;
+   * the response conforms to the desired shape, so it can be safely passed to
+   * the transformers and returned to the user.
+   */
+  responseValidator?: (data: unknown) => Promise<unknown>;
 }
 
 type IsExactlyNeverOrNeverUndefined<T> = [T] extends [never]
-	? true
+  ? true
-	: [T] extends [never | undefined]
+  : [T] extends [never | undefined]
-		? [undefined] extends [T]
+    ? [undefined] extends [T]
-			? false
+      ? false
-			: true
+      : true
-		: false;
+    : false;
 
 export type OmitNever<T extends Record<string, unknown>> = {
-	[K in keyof T as IsExactlyNeverOrNeverUndefined<T[K]> extends true ? never : K]: T[K];
+  [K in keyof T as IsExactlyNeverOrNeverUndefined<T[K]> extends true ? never : K]: T[K];
 };

app/client/api-client/core/utils.gen.ts

@@ -1,137 +1,141 @@
+// @ts-nocheck
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { BodySerializer, QuerySerializer } from "./bodySerializer.gen";
+import type { BodySerializer, QuerySerializer } from './bodySerializer.gen';
 import {
-	type ArraySeparatorStyle,
+  type ArraySeparatorStyle,
-	serializeArrayParam,
+  serializeArrayParam,
-	serializeObjectParam,
+  serializeObjectParam,
-	serializePrimitiveParam,
+  serializePrimitiveParam,
-} from "./pathSerializer.gen";
+} from './pathSerializer.gen';
 
 export interface PathSerializer {
-	path: Record<string, unknown>;
+  path: Record<string, unknown>;
-	url: string;
+  url: string;
 }
 
 export const PATH_PARAM_RE = /\{[^{}]+\}/g;
 
 export const defaultPathSerializer = ({ path, url: _url }: PathSerializer) => {
-	let url = _url;
+  let url = _url;
-	const matches = _url.match(PATH_PARAM_RE);
+  const matches = _url.match(PATH_PARAM_RE);
-	if (matches) {
+  if (matches) {
-		for (const match of matches) {
+    for (const match of matches) {
-			let explode = false;
+      let explode = false;
-			let name = match.substring(1, match.length - 1);
+      let name = match.substring(1, match.length - 1);
-			let style: ArraySeparatorStyle = "simple";
+      let style: ArraySeparatorStyle = 'simple';
 
-			if (name.endsWith("*")) {
+      if (name.endsWith('*')) {
-				explode = true;
+        explode = true;
-				name = name.substring(0, name.length - 1);
+        name = name.substring(0, name.length - 1);
-			}
+      }
 
-			if (name.startsWith(".")) {
+      if (name.startsWith('.')) {
-				name = name.substring(1);
+        name = name.substring(1);
-				style = "label";
+        style = 'label';
-			} else if (name.startsWith(";")) {
+      } else if (name.startsWith(';')) {
-				name = name.substring(1);
+        name = name.substring(1);
-				style = "matrix";
+        style = 'matrix';
-			}
+      }
 
-			const value = path[name];
+      const value = path[name];
 
-			if (value === undefined || value === null) {
+      if (value === undefined || value === null) {
-				continue;
+        continue;
-			}
+      }
 
-			if (Array.isArray(value)) {
+      if (Array.isArray(value)) {
-				url = url.replace(match, serializeArrayParam({ explode, name, style, value }));
+        url = url.replace(match, serializeArrayParam({ explode, name, style, value }));
-				continue;
+        continue;
-			}
+      }
 
-			if (typeof value === "object") {
+      if (typeof value === 'object') {
-				url = url.replace(
+        url = url.replace(
-					match,
+          match,
-					serializeObjectParam({
+          serializeObjectParam({
-						explode,
+            explode,
-						name,
+            name,
-						style,
+            style,
-						value: value as Record<string, unknown>,
+            value: value as Record<string, unknown>,
-						valueOnly: true,
+            valueOnly: true,
-					}),
+          }),
-				);
+        );
-				continue;
+        continue;
-			}
+      }
 
-			if (style === "matrix") {
+      if (style === 'matrix') {
-				url = url.replace(
+        url = url.replace(
-					match,
+          match,
-					`;${serializePrimitiveParam({
+          `;${serializePrimitiveParam({
-						name,
+            name,
-						value: value as string,
+            value: value as string,
-					})}`,
+          })}`,
-				);
+        );
-				continue;
+        continue;
-			}
+      }
 
-			const replaceValue = encodeURIComponent(style === "label" ? `.${value as string}` : (value as string));
+      const replaceValue = encodeURIComponent(
-			url = url.replace(match, replaceValue);
+        style === 'label' ? `.${value as string}` : (value as string),
-		}
+      );
-	}
+      url = url.replace(match, replaceValue);
-	return url;
+    }
+  }
+  return url;
 };
 
 export const getUrl = ({
-	baseUrl,
+  baseUrl,
-	path,
+  path,
-	query,
+  query,
-	querySerializer,
+  querySerializer,
-	url: _url,
+  url: _url,
 }: {
-	baseUrl?: string;
+  baseUrl?: string;
-	path?: Record<string, unknown>;
+  path?: Record<string, unknown>;
-	query?: Record<string, unknown>;
+  query?: Record<string, unknown>;
-	querySerializer: QuerySerializer;
+  querySerializer: QuerySerializer;
-	url: string;
+  url: string;
 }) => {
-	const pathUrl = _url.startsWith("/") ? _url : `/${_url}`;
+  const pathUrl = _url.startsWith('/') ? _url : `/${_url}`;
-	let url = (baseUrl ?? "") + pathUrl;
+  let url = (baseUrl ?? '') + pathUrl;
-	if (path) {
+  if (path) {
-		url = defaultPathSerializer({ path, url });
+    url = defaultPathSerializer({ path, url });
-	}
+  }
-	let search = query ? querySerializer(query) : "";
+  let search = query ? querySerializer(query) : '';
-	if (search.startsWith("?")) {
+  if (search.startsWith('?')) {
-		search = search.substring(1);
+    search = search.substring(1);
-	}
+  }
-	if (search) {
+  if (search) {
-		url += `?${search}`;
+    url += `?${search}`;
-	}
+  }
-	return url;
+  return url;
 };
 
 export function getValidRequestBody(options: {
-	body?: unknown;
+  body?: unknown;
-	bodySerializer?: BodySerializer | null;
+  bodySerializer?: BodySerializer | null;
-	serializedBody?: unknown;
+  serializedBody?: unknown;
 }) {
-	const hasBody = options.body !== undefined;
+  const hasBody = options.body !== undefined;
-	const isSerializedBody = hasBody && options.bodySerializer;
+  const isSerializedBody = hasBody && options.bodySerializer;
 
-	if (isSerializedBody) {
+  if (isSerializedBody) {
-		if ("serializedBody" in options) {
+    if ('serializedBody' in options) {
-			const hasSerializedBody = options.serializedBody !== undefined && options.serializedBody !== "";
+      const hasSerializedBody =
+        options.serializedBody !== undefined && options.serializedBody !== '';
 
-			return hasSerializedBody ? options.serializedBody : null;
+      return hasSerializedBody ? options.serializedBody : null;
-		}
+    }
 
-		// not all clients implement a serializedBody property (i.e. client-axios)
+    // not all clients implement a serializedBody property (i.e., client-axios)
-		return options.body !== "" ? options.body : null;
+    return options.body !== '' ? options.body : null;
-	}
+  }
 
-	// plain/text body
+  // plain/text body
-	if (hasBody) {
+  if (hasBody) {
-		return options.body;
+    return options.body;
-	}
+  }
 
-	// no body was provided
+  // no body was provided
-	return undefined;
+  return undefined;
 }

app/client/api-client/index.ts

@@ -13,21 +13,30 @@ export {
 	deleteRepository,
 	deleteSnapshot,
 	deleteSnapshots,
+	deleteSsoInvitation,
+	deleteSsoProvider,
+	deleteUserAccount,
 	deleteVolume,
 	devPanelExec,
 	downloadResticPassword,
 	dumpSnapshot,
+	getAdminUsers,
+	getBackupProgress,
 	getBackupSchedule,
 	getBackupScheduleForVolume,
 	getDevPanel,
 	getMirrorCompatibility,
+	getMirrorSyncStatus,
 	getNotificationDestination,
+	getOrgMembers,
+	getPublicSsoProviders,
 	getRegistrationStatus,
 	getRepository,
 	getRepositoryStats,
 	getScheduleMirrors,
 	getScheduleNotifications,
 	getSnapshotDetails,
+	getSsoSettings,
 	getStatus,
 	getSystemInfo,
 	getUpdates,
@@ -44,7 +53,9 @@ export {
 	listVolumes,
 	mountVolume,
 	type Options,
+	refreshRepositoryStats,
 	refreshSnapshots,
+	removeOrgMember,
 	reorderBackupSchedules,
 	restoreSnapshot,
 	runBackupNow,
@@ -52,16 +63,19 @@ export {
 	setRegistrationStatus,
 	startDoctor,
 	stopBackup,
+	syncMirror,
 	tagSnapshots,
 	testConnection,
 	testNotificationDestination,
 	unlockRepository,
 	unmountVolume,
 	updateBackupSchedule,
+	updateMemberRole,
 	updateNotificationDestination,
 	updateRepository,
 	updateScheduleMirrors,
 	updateScheduleNotifications,
+	updateSsoProviderAutoLinking,
 	updateVolume,
 } from "./sdk.gen";
 export type {
@@ -101,6 +115,15 @@ export type {
 	DeleteSnapshotsData,
 	DeleteSnapshotsResponse,
 	DeleteSnapshotsResponses,
+	DeleteSsoInvitationData,
+	DeleteSsoInvitationErrors,
+	DeleteSsoInvitationResponses,
+	DeleteSsoProviderData,
+	DeleteSsoProviderErrors,
+	DeleteSsoProviderResponses,
+	DeleteUserAccountData,
+	DeleteUserAccountErrors,
+	DeleteUserAccountResponses,
 	DeleteVolumeData,
 	DeleteVolumeResponse,
 	DeleteVolumeResponses,
@@ -114,6 +137,12 @@ export type {
 	DumpSnapshotData,
 	DumpSnapshotResponse,
 	DumpSnapshotResponses,
+	GetAdminUsersData,
+	GetAdminUsersResponse,
+	GetAdminUsersResponses,
+	GetBackupProgressData,
+	GetBackupProgressResponse,
+	GetBackupProgressResponses,
 	GetBackupScheduleData,
 	GetBackupScheduleForVolumeData,
 	GetBackupScheduleForVolumeResponse,
@@ -126,10 +155,19 @@ export type {
 	GetMirrorCompatibilityData,
 	GetMirrorCompatibilityResponse,
 	GetMirrorCompatibilityResponses,
+	GetMirrorSyncStatusData,
+	GetMirrorSyncStatusResponse,
+	GetMirrorSyncStatusResponses,
 	GetNotificationDestinationData,
 	GetNotificationDestinationErrors,
 	GetNotificationDestinationResponse,
 	GetNotificationDestinationResponses,
+	GetOrgMembersData,
+	GetOrgMembersResponse,
+	GetOrgMembersResponses,
+	GetPublicSsoProvidersData,
+	GetPublicSsoProvidersResponse,
+	GetPublicSsoProvidersResponses,
 	GetRegistrationStatusData,
 	GetRegistrationStatusResponse,
 	GetRegistrationStatusResponses,
@@ -148,6 +186,9 @@ export type {
 	GetSnapshotDetailsData,
 	GetSnapshotDetailsResponse,
 	GetSnapshotDetailsResponses,
+	GetSsoSettingsData,
+	GetSsoSettingsResponse,
+	GetSsoSettingsResponses,
 	GetStatusData,
 	GetStatusResponse,
 	GetStatusResponses,
@@ -195,9 +236,15 @@ export type {
 	MountVolumeData,
 	MountVolumeResponse,
 	MountVolumeResponses,
+	RefreshRepositoryStatsData,
+	RefreshRepositoryStatsResponse,
+	RefreshRepositoryStatsResponses,
 	RefreshSnapshotsData,
 	RefreshSnapshotsResponse,
 	RefreshSnapshotsResponses,
+	RemoveOrgMemberData,
+	RemoveOrgMemberErrors,
+	RemoveOrgMemberResponses,
 	ReorderBackupSchedulesData,
 	ReorderBackupSchedulesResponse,
 	ReorderBackupSchedulesResponses,
@@ -221,6 +268,10 @@ export type {
 	StopBackupErrors,
 	StopBackupResponse,
 	StopBackupResponses,
+	SyncMirrorData,
+	SyncMirrorErrors,
+	SyncMirrorResponse,
+	SyncMirrorResponses,
 	TagSnapshotsData,
 	TagSnapshotsResponse,
 	TagSnapshotsResponses,
@@ -240,6 +291,9 @@ export type {
 	UpdateBackupScheduleData,
 	UpdateBackupScheduleResponse,
 	UpdateBackupScheduleResponses,
+	UpdateMemberRoleData,
+	UpdateMemberRoleErrors,
+	UpdateMemberRoleResponses,
 	UpdateNotificationDestinationData,
 	UpdateNotificationDestinationErrors,
 	UpdateNotificationDestinationResponse,
@@ -254,6 +308,9 @@ export type {
 	UpdateScheduleNotificationsData,
 	UpdateScheduleNotificationsResponse,
 	UpdateScheduleNotificationsResponses,
+	UpdateSsoProviderAutoLinkingData,
+	UpdateSsoProviderAutoLinkingErrors,
+	UpdateSsoProviderAutoLinkingResponses,
 	UpdateVolumeData,
 	UpdateVolumeErrors,
 	UpdateVolumeResponse,

app/client/components/__test__/file-tree.test.tsx

@@ -1,8 +1,48 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: Testing file - non-null assertions are acceptable here */
-import { expect, test, describe } from "bun:test";
+import { afterEach, describe, expect, test } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { cleanup, render, screen, fireEvent, within } from "@testing-library/react";
+import { useState } from "react";
 import { FileTree, type FileEntry } from "../file-tree";
 
+const getCheckboxFor = (name: string) => {
+	const row = screen.getByRole("button", { name });
+	return within(row).getByRole("checkbox");
+};
+
+const FileTreeSelection = ({
+	files,
+	initialSelectedPaths = [],
+	expandedFolders,
+}: {
+	files: FileEntry[];
+	initialSelectedPaths?: string[];
+	expandedFolders?: Set<string>;
+}) => {
+	const [selectedPaths, setSelectedPaths] = useState(() => new Set(initialSelectedPaths));
+
+	return (
+		<>
+			<FileTree
+				files={files}
+				withCheckboxes={true}
+				selectedPaths={selectedPaths}
+				onSelectionChange={setSelectedPaths}
+				expandedFolders={expandedFolders}
+			/>
+			<output aria-label="Selected paths">{JSON.stringify(Array.from(selectedPaths).sort())}</output>
+		</>
+	);
+};
+
+const getSelectedPaths = () => {
+	const selectedPaths = screen.getByLabelText("Selected paths").textContent;
+	return JSON.parse(selectedPaths ?? "[]") as string[];
+};
+
+afterEach(() => {
+	cleanup();
+});
+
 describe("FileTree Pagination", () => {
 	const testFiles: FileEntry[] = [
 		{ name: "root", path: "/root", type: "folder" },
@@ -145,6 +185,19 @@ describe("FileTree Pagination", () => {
 
 		expect(screen.queryByText("Load more files")).toBeNull();
 	});
+
+	test("renders missing ancestor folders for nested paths", () => {
+		render(
+			<FileTree
+				files={[
+					{ name: "subdir", path: "/project/subdir", type: "folder" },
+					{ name: "file1", path: "/project/subdir/file1", type: "file" },
+				]}
+			/>,
+		);
+
+		expect(screen.getByRole("button", { name: "project" })).toBeTruthy();
+	});
 });
 
 describe("FileTree Selection Logic", () => {
@@ -157,154 +210,67 @@ describe("FileTree Selection Logic", () => {
 		{ name: "upload", path: "/root/photos/upload", type: "folder" },
 	];
 
-	test("selecting a folder simplifies to parent if it's the only child", async () => {
+	test("selecting a folder simplifies to parent if it's the only child", () => {
-		let currentSelection = new Set<string>();
+		render(<FileTreeSelection files={testFiles} expandedFolders={new Set(testFiles.map((f) => f.path))} />);
-		const onSelectionChange = (selection: Set<string>) => {
-			currentSelection = selection;
-		};
 
-		render(
+		fireEvent.click(getCheckboxFor("photos"));
-			<FileTree
-				files={testFiles}
-				withCheckboxes={true}
-				selectedPaths={currentSelection}
-				onSelectionChange={onSelectionChange}
-				expandedFolders={new Set(testFiles.map((f) => f.path))}
-			/>,
-		);
 
-		const photosCheckbox = screen.getByText("photos").parentElement?.querySelector('button[role="checkbox"]');
+		expect(getSelectedPaths()).toEqual(["/root"]);
-		expect(photosCheckbox).toBeTruthy();
-
-		fireEvent.click(photosCheckbox!);
-
-		expect(currentSelection.has("/root")).toBe(true);
-		expect(currentSelection.size).toBe(1);
 	});
 
-	test("unselecting a child removes the parent from selection", async () => {
+	test("unselecting a child removes the parent from selection", () => {
-		let currentSelection = new Set<string>(["/root"]);
-		const onSelectionChange = (selection: Set<string>) => {
-			currentSelection = selection;
-		};
-
 		render(
-			<FileTree
+			<FileTreeSelection
 				files={testFiles}
-				withCheckboxes={true}
+				initialSelectedPaths={["/root"]}
-				selectedPaths={currentSelection}
-				onSelectionChange={onSelectionChange}
 				expandedFolders={new Set(testFiles.map((f) => f.path))}
 			/>,
 		);
 
-		const libraryCheckbox = screen.getByText("library").parentElement?.querySelector('button[role="checkbox"]');
+		fireEvent.click(getCheckboxFor("library"));
-		fireEvent.click(libraryCheckbox!);
 
-		expect(currentSelection.has("/root")).toBe(false);
+		expect(getSelectedPaths()).toEqual(["/root/photos/backups", "/root/photos/profile", "/root/photos/upload"]);
-		expect(currentSelection.has("/root/photos")).toBe(false);
-
-		expect(currentSelection.has("/root/photos/backups")).toBe(true);
-		expect(currentSelection.has("/root/photos/profile")).toBe(true);
-		expect(currentSelection.has("/root/photos/upload")).toBe(true);
-		expect(currentSelection.size).toBe(3);
 	});
 
-	test("recursive simplification when all children are selected", async () => {
+	test("recursive simplification when all children are selected", () => {
-		let currentSelection = new Set<string>();
+		render(<FileTreeSelection files={testFiles} expandedFolders={new Set(testFiles.map((f) => f.path))} />);
-		const onSelectionChange = (selection: Set<string>) => {
-			currentSelection = selection;
-		};
-
-		const { rerender } = render(
-			<FileTree
-				files={testFiles}
-				withCheckboxes={true}
-				selectedPaths={currentSelection}
-				onSelectionChange={onSelectionChange}
-				expandedFolders={new Set(testFiles.map((f) => f.path))}
-			/>,
-		);
 
 		const children = ["backups", "library", "profile", "upload"];
 
 		for (const name of children) {
-			const checkbox = screen.getByText(name).parentElement?.querySelector('button[role="checkbox"]');
+			fireEvent.click(getCheckboxFor(name));
-			fireEvent.click(checkbox!);
-
-			rerender(
-				<FileTree
-					files={testFiles}
-					withCheckboxes={true}
-					selectedPaths={currentSelection}
-					onSelectionChange={onSelectionChange}
-					expandedFolders={new Set(testFiles.map((f) => f.path))}
-				/>,
-			);
 		}
 
-		expect(currentSelection.has("/root")).toBe(true);
+		expect(getSelectedPaths()).toEqual(["/root"]);
-		expect(currentSelection.size).toBe(1);
 	});
 
-	test("does not simplify to parent if not all children are selected", async () => {
+	test("does not simplify to parent if not all children are selected", () => {
 		const multipleFiles: FileEntry[] = [
 			{ name: "root", path: "/root", type: "folder" },
 			{ name: "child1", path: "/root/child1", type: "folder" },
 			{ name: "child2", path: "/root/child2", type: "folder" },
 		];
 
-		let currentSelection = new Set<string>();
+		render(<FileTreeSelection files={multipleFiles} expandedFolders={new Set(multipleFiles.map((f) => f.path))} />);
-		const onSelectionChange = (selection: Set<string>) => {
-			currentSelection = selection;
-		};
 
-		render(
+		fireEvent.click(getCheckboxFor("child1"));
-			<FileTree
-				files={multipleFiles}
-				withCheckboxes={true}
-				selectedPaths={currentSelection}
-				onSelectionChange={onSelectionChange}
-				expandedFolders={new Set(multipleFiles.map((f) => f.path))}
-			/>,
-		);
 
-		const child1Checkbox = screen.getByText("child1").parentElement?.querySelector('button[role="checkbox"]');
+		expect(getSelectedPaths()).toEqual(["/root/child1"]);
-		fireEvent.click(child1Checkbox!);
-
-		expect(currentSelection.has("/root/child1")).toBe(true);
-		expect(currentSelection.has("/root")).toBe(false);
-		expect(currentSelection.size).toBe(1);
 	});
 
-	test("simplifies existing deep paths when parent is selected", async () => {
+	test("simplifies existing deep paths when parent is selected", () => {
 		const files: FileEntry[] = [
 			{ name: "hello", path: "/hello", type: "folder" },
 			{ name: "hello_prev", path: "/hello_prev", type: "folder" },
 			{ name: "service", path: "/service", type: "folder" },
 		];
 
-		let currentSelection = new Set<string>(["/hello", "/hello_prev", "/service/app/data/upload"]);
-		const onSelectionChange = (selection: Set<string>) => {
-			currentSelection = selection;
-		};
-
 		render(
-			<FileTree
+			<FileTreeSelection files={files} initialSelectedPaths={["/hello", "/hello_prev", "/service/app/data/upload"]} />,
-				files={files}
-				withCheckboxes={true}
-				selectedPaths={currentSelection}
-				onSelectionChange={onSelectionChange}
-			/>,
 		);
 
-		const serviceCheckbox = screen.getByText("service").parentElement?.querySelector('button[role="checkbox"]');
+		fireEvent.click(getCheckboxFor("service"));
-		expect(serviceCheckbox).toBeTruthy();
 
-		fireEvent.click(serviceCheckbox!);
+		expect(getSelectedPaths()).toEqual(["/hello", "/hello_prev", "/service"]);
-
-		expect(currentSelection.has("/service")).toBe(true);
-		expect(currentSelection.has("/service/app/data/upload")).toBe(false);
-		expect(currentSelection.size).toBe(3); // /hello, /hello_prev, /service
 	});
 });

app/client/components/__test__/restore-form.test.tsx

@@ -0,0 +1,155 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { HttpResponse, http, server } from "~/test/msw/server";
+import { cleanup, render, screen, userEvent, waitFor, within } from "~/test/test-utils";
+import { fromAny } from "@total-typescript/shoehorn";
+
+vi.mock("@tanstack/react-router", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("@tanstack/react-router")>();
+
+	return {
+		...actual,
+		useNavigate: (() => vi.fn(async () => {})) as typeof actual.useNavigate,
+	};
+});
+
+import { RestoreForm } from "../restore-form";
+
+class MockEventSource {
+	addEventListener() {}
+	close() {}
+	onerror: ((event: Event) => void) | null = null;
+
+	constructor(public url: string) {}
+}
+
+const originalEventSource = globalThis.EventSource;
+
+beforeEach(() => {
+	globalThis.EventSource = MockEventSource as unknown as typeof EventSource;
+});
+
+afterEach(() => {
+	globalThis.EventSource = originalEventSource;
+	cleanup();
+});
+
+describe("RestoreForm", () => {
+	test("restores the selected ancestor folder path from a broader display root", async () => {
+		let restoreRequestBody: unknown;
+
+		server.use(
+			http.get("/api/v1/repositories/:shortId/snapshots/:snapshotId/files", () => {
+				return HttpResponse.json({
+					files: [
+						{ name: "subdir", path: "/mnt/project/subdir", type: "dir" },
+						{ name: "deep.tx", path: "/mnt/project/subdir/deep.tx", type: "file" },
+					],
+				});
+			}),
+			http.post("/api/v1/repositories/:shortId/restore", async ({ request }) => {
+				restoreRequestBody = await request.json();
+				return HttpResponse.json({
+					success: true,
+					message: "Snapshot restored successfully",
+					filesRestored: 1,
+					filesSkipped: 0,
+				});
+			}),
+		);
+
+		render(
+			<RestoreForm
+				repository={fromAny({ shortId: "repo-1", name: "Repo 1" })}
+				snapshotId="snap-1"
+				returnPath="/repositories/repo-1/snap-1"
+				queryBasePath="/mnt/project/subdir"
+				displayBasePath="/mnt"
+			/>,
+		);
+
+		const row = await screen.findByRole("button", { name: "project" });
+		await userEvent.click(within(row).getByRole("checkbox"));
+		await userEvent.click(screen.getByRole("button", { name: "Restore 1 item" }));
+
+		await waitFor(() => {
+			expect(restoreRequestBody).toEqual({
+				snapshotId: "snap-1",
+				include: ["/mnt/project"],
+				selectedItemKind: "dir",
+				overwrite: "always",
+			});
+		});
+	});
+
+	test("restores the selected full path when the display root is unrelated", async () => {
+		let restoreRequestBody: unknown;
+
+		server.use(
+			http.get("/api/v1/repositories/:shortId/snapshots/:snapshotId/files", () => {
+				return HttpResponse.json({
+					files: [
+						{ name: "project", path: "/mnt/project", type: "dir" },
+						{ name: "a.txt", path: "/mnt/project/a.txt", type: "file" },
+					],
+				});
+			}),
+			http.post("/api/v1/repositories/:shortId/restore", async ({ request }) => {
+				restoreRequestBody = await request.json();
+				return HttpResponse.json({
+					success: true,
+					message: "Snapshot restored successfully",
+					filesRestored: 1,
+					filesSkipped: 0,
+				});
+			}),
+			http.get("/api/v1/volumes/filesystem/browse", () => {
+				return HttpResponse.json({
+					path: "/",
+					directories: [{ name: "restore-target", path: "/restore-target", type: "dir" }],
+				});
+			}),
+		);
+
+		render(
+			<RestoreForm
+				repository={fromAny({ shortId: "repo-1", name: "Repo 1" })}
+				snapshotId="snap-1"
+				returnPath="/repositories/repo-1/snap-1"
+				queryBasePath="/mnt/project"
+				displayBasePath="/other/root"
+			/>,
+		);
+
+		expect(
+			screen.getByText(
+				"This snapshot was created from source paths that do not match this Zerobyte server or the current linked volume. Restoring to the original location is unavailable. Restore it to a custom location, or download it instead.",
+			),
+		).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Original location" }).hasAttribute("disabled")).toBe(true);
+		expect(screen.getByRole("button", { name: "Restore All" }).hasAttribute("disabled")).toBe(true);
+
+		await userEvent.click(screen.getByRole("button", { name: "Change" }));
+		await userEvent.click(await screen.findByRole("button", { name: "restore-target" }));
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: "Restore All" }).hasAttribute("disabled")).toBe(false);
+		});
+
+		const row = await screen.findByRole("button", { name: "mnt" });
+		await userEvent.click(within(row).getByRole("checkbox"));
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: "Restore 1 item" }).hasAttribute("disabled")).toBe(false);
+		});
+
+		await userEvent.click(screen.getByRole("button", { name: "Restore 1 item" }));
+
+		await waitFor(() => {
+			expect(restoreRequestBody).toEqual({
+				snapshotId: "snap-1",
+				include: ["/mnt"],
+				selectedItemKind: "dir",
+				targetPath: "/restore-target",
+				overwrite: "always",
+			});
+		});
+	});
+});

app/client/components/app-breadcrumb.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { useMatches, Link } from "@tanstack/react-router";
 import {
 	Breadcrumb,
@@ -41,7 +42,7 @@ export function AppBreadcrumb() {
 					const isLast = index === breadcrumbs.length - 1;
 
 					return (
-						<div key={`${breadcrumb.label}-${index}`} className="contents">
+						<Fragment key={`${breadcrumb.label}-${index}`}>
 							<BreadcrumbItem>
 								{isLast || !breadcrumb.href ? (
 									<BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
@@ -52,7 +53,7 @@ export function AppBreadcrumb() {
 								)}
 							</BreadcrumbItem>
 							{!isLast && <BreadcrumbSeparator />}
-						</div>
+						</Fragment>
 					);
 				})}
 			</BreadcrumbList>

app/client/components/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { Bell, CalendarClock, Database, HardDrive, Settings } from "lucide-react";
+import { Bell, CalendarClock, Database, HardDrive, Settings, ShieldCheck } from "lucide-react";
 import { useState } from "react";
 import {
 	Sidebar,
@@ -10,6 +10,7 @@ import {
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
+	SidebarSeparator,
 	useSidebar,
 } from "~/client/components/ui/sidebar";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
@@ -18,6 +19,7 @@ import { cn } from "~/client/lib/utils";
 import { APP_VERSION, RCLONE_VERSION, RESTIC_VERSION, SHOUTRRR_VERSION } from "~/client/lib/version";
 import { useUpdates } from "~/client/hooks/use-updates";
 import { ReleaseNotesDialog } from "./release-notes-dialog";
+import { OrganizationSwitcher } from "./organization-switcher";
 import { Link } from "@tanstack/react-router";
 
 const items = [
@@ -48,11 +50,17 @@ const items = [
 	},
 ];
 
-export function AppSidebar() {
+type Props = {
+	isInstanceAdmin: boolean;
+};
+
+export function AppSidebar({ isInstanceAdmin }: Props) {
 	const { state, isMobile, setOpenMobile } = useSidebar();
 	const { updates, hasUpdate } = useUpdates();
 	const [showReleaseNotes, setShowReleaseNotes] = useState(false);
 
+	const isCollapsed = state === "collapsed";
+
 	const displayVersion = APP_VERSION.startsWith("v") || APP_VERSION === "dev" ? APP_VERSION : `v${APP_VERSION}`;
 	const releaseUrl =
 		APP_VERSION === "dev"
@@ -61,12 +69,12 @@ export function AppSidebar() {
 
 	return (
 		<Sidebar variant="inset" collapsible="icon" className="p-0">
-			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-16.25 flex-row items-center p-4">
+			<SidebarHeader className="bg-card-header border-b border-border/80 dark:border-border/50 hidden md:flex h-16.25 flex-row items-center p-4">
 				<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
 					<img src="/images/zerobyte.png" alt="Zerobyte Logo" className={cn("h-8 w-8 shrink-0 object-contain -ml-2")} />
 					<span
 						className={cn("text-base transition-all duration-200 -ml-1", {
-							"opacity-0 w-0 overflow-hidden ": state === "collapsed",
+							"opacity-0 w-0 overflow-hidden ": isCollapsed,
 						})}
 					>
 						Zerobyte
@@ -82,18 +90,43 @@ export function AppSidebar() {
 									<TooltipProvider>
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<SidebarMenuButton asChild>
+												<SidebarMenuButton asChild className="relative overflow-hidden">
-													<Link to={item.url} onClick={() => isMobile && setOpenMobile(false)}>
+													<Link
+														to={item.url}
+														onClick={() => isMobile && setOpenMobile(false)}
+														activeProps={{ className: "bg-strong-accent/10" }}
+														className="w-full flex items-center gap-2"
+													>
 														{({ isActive }) => (
 															<>
-																<item.icon className={cn({ "text-strong-accent": isActive })} />
+																{isActive && (
-																<span className={cn({ "text-strong-accent": isActive })}>{item.title}</span>
+																	<div
+																		className={cn("absolute left-0 top-0 h-full w-0.75 bg-strong-accent mr-2", {
+																			hidden: isCollapsed,
+																		})}
+																	/>
+																)}
+																<item.icon
+																	className={cn("transition-all duration-200", {
+																		"text-strong-accent": isActive,
+																		"ml-1": isActive && !isCollapsed,
+																		"text-muted-foreground": !isActive,
+																	})}
+																/>
+																<span
+																	className={cn({
+																		"text-foreground font-medium": isActive,
+																		"text-muted-foreground": !isActive,
+																	})}
+																>
+																	{item.title}
+																</span>
 															</>
 														)}
 													</Link>
 												</SidebarMenuButton>
 											</TooltipTrigger>
-											<TooltipContent side="right" className={cn({ hidden: state !== "collapsed" })}>
+											<TooltipContent side="right" className={cn({ hidden: !isCollapsed })}>
 												<p>{item.title}</p>
 											</TooltipContent>
 										</Tooltip>
@@ -103,8 +136,66 @@ export function AppSidebar() {
 						</SidebarMenu>
 					</SidebarGroupContent>
 				</SidebarGroup>
+				{isInstanceAdmin && (
+					<>
+						<SidebarSeparator />
+						<SidebarGroup>
+							<SidebarGroupContent>
+								<SidebarMenu>
+									<SidebarMenuItem>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<SidebarMenuButton asChild className="relative overflow-hidden">
+														<Link
+															to="/admin"
+															onClick={() => isMobile && setOpenMobile(false)}
+															activeProps={{ className: "bg-strong-accent/10" }}
+															className="w-full flex items-center gap-2"
+														>
+															{({ isActive }) => (
+																<>
+																	{isActive && (
+																		<div
+																			className={cn("absolute left-0 top-0 h-full w-0.75 bg-strong-accent mr-2", {
+																				hidden: isCollapsed,
+																			})}
+																		/>
+																	)}
+																	<ShieldCheck
+																		className={cn("transition-all duration-200", {
+																			"text-strong-accent": isActive,
+																			"ml-1": isActive && !isCollapsed,
+																			"text-muted-foreground": !isActive,
+																		})}
+																	/>
+																	<span
+																		className={cn({
+																			"text-foreground font-medium": isActive,
+																			"text-muted-foreground": !isActive,
+																		})}
+																	>
+																		Administration
+																	</span>
+																</>
+															)}
+														</Link>
+													</SidebarMenuButton>
+												</TooltipTrigger>
+												<TooltipContent side="right" className={cn({ hidden: !isCollapsed })}>
+													<p>Administration</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</SidebarMenuItem>
+								</SidebarMenu>
+							</SidebarGroupContent>
+						</SidebarGroup>
+					</>
+				)}
 			</SidebarContent>
-			<SidebarFooter className="p-4 border-r border-t border-border/50">
+			<SidebarFooter className="p-4 border-r border-border/80 dark:border-border/50">
+				<OrganizationSwitcher />
 				<div className="flex items-center justify-between gap-2">
 					<HoverCard openDelay={200}>
 						<HoverCardTrigger asChild>

app/client/components/backup-summary-card.tsx

@@ -1,14 +1,13 @@
 import { Card, CardContent } from "~/client/components/ui/card";
 import { ByteSize } from "~/client/components/bytes-size";
-import type { ResticSnapshotSummaryDto } from "~/schemas/restic-dto";
+import { useRootLoaderData } from "~/client/hooks/use-root-loader-data";
+import type { ResticSnapshotSummaryDto } from "@zerobyte/core/restic";
 import { formatDuration } from "~/utils/utils";
 
 type Props = {
 	summary?: ResticSnapshotSummaryDto | null;
 };
 
-const formatCount = (value: number) => value.toLocaleString();
-
 const getDurationLabel = (start: string, end: string) => {
 	const startMs = new Date(start).getTime();
 	const endMs = new Date(end).getTime();
@@ -17,8 +16,11 @@ const getDurationLabel = (start: string, end: string) => {
 };
 
 export const BackupSummaryCard = ({ summary }: Props) => {
+	const { locale } = useRootLoaderData();
+
 	if (!summary) return null;
 
+	const formatCount = (value: number) => value.toLocaleString(locale);
 	const durationLabel = getDurationLabel(summary.backup_start, summary.backup_end);
 
 	const topStats = [

app/client/components/bytes-size.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { formatBytes } from "~/utils/format-bytes";
+import { useFormatBytes } from "~/client/hooks/use-format-bytes";
 
 type ByteSizeProps = {
 	bytes: number;
@@ -14,6 +14,7 @@ type ByteSizeProps = {
 };
 
 export function ByteSize(props: ByteSizeProps) {
+	const formatBytes = useFormatBytes();
 	const {
 		bytes,
 		base = 1000,

app/client/components/cron-input.tsx

@@ -3,7 +3,7 @@ import { AlertCircle, CheckCircle2 } from "lucide-react";
 import { useMemo } from "react";
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
 import { Input } from "~/client/components/ui/input";
-import { formatDateTime } from "~/client/lib/datetime";
+import { useTimeFormat } from "~/client/lib/datetime";
 import { cn } from "~/client/lib/utils";
 
 interface CronInputProps {
@@ -13,6 +13,7 @@ interface CronInputProps {
 }
 
 export function CronInput({ value, onChange, error }: CronInputProps) {
+	const { formatDateTime } = useTimeFormat();
 	const { isValid, nextRuns, parseError } = useMemo(() => {
 		if (!value) {
 			return { isValid: false, nextRuns: [], parseError: null };
@@ -59,7 +60,7 @@ export function CronInput({ value, onChange, error }: CronInputProps) {
 						{value && (
 							<div>
 								{isValid ? (
-									<CheckCircle2 className="h-4 w-4 text-green-500" />
+									<CheckCircle2 className="h-4 w-4 text-success" />
 								) : (
 									<AlertCircle className="h-4 w-4 text-destructive" />
 								)}

app/client/components/data-table-sort-header.tsx

@@ -0,0 +1,54 @@
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Button } from "~/client/components/ui/button";
+import { cn } from "~/client/lib/utils";
+
+export function DataTableSortHeader<TData, TValue>({
+	column,
+	title,
+	sortDirection,
+	center = false,
+}: {
+	column: Column<TData, TValue>;
+	title: string;
+	sortDirection: false | "asc" | "desc";
+	center?: boolean;
+}) {
+	const icon =
+		sortDirection === "desc" ? (
+			<ArrowDown className="ml-2 h-3.5 w-3.5" />
+		) : sortDirection === "asc" ? (
+			<ArrowUp className="ml-2 h-3.5 w-3.5" />
+		) : (
+			<ArrowUpDown className="ml-2 h-3.5 w-3.5" />
+		);
+	const iconVisibility = sortDirection ? "" : "lg:invisible lg:group-hover/sort:visible";
+
+	if (center) {
+		return (
+			<Button
+				type="button"
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				className="h-auto! w-full! p-0! font-inherit hover:bg-transparent uppercase group/sort relative"
+			>
+				<span className="relative flex w-full items-center justify-center">
+					{title}
+					<span className={cn("lg:absolute lg:-right-6 lg:top-1/2 lg:-translate-y-1/2", iconVisibility)}>{icon}</span>
+				</span>
+			</Button>
+		);
+	}
+
+	return (
+		<Button
+			type="button"
+			variant="ghost"
+			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+			className="h-auto! p-0! font-inherit hover:bg-transparent uppercase group/sort"
+		>
+			{title}
+			<span className={iconVisibility}>{icon}</span>
+		</Button>
+	);
+}

app/client/components/dev-panel-listener.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useHotkey } from "@tanstack/react-hotkeys";
+import { useHotkeySequence } from "@tanstack/react-hotkeys";
 import { getDevPanelOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { DevPanel } from "./dev-panel";
 
@@ -10,7 +10,12 @@ export function DevPanelListener() {
 		...getDevPanelOptions(),
 	});
 
-	useHotkey("Mod+Shift+D", () => setIsOpen(true), { enabled: !!devPanelStatus?.enabled, preventDefault: true });
+	useHotkeySequence(["D", "E", "V"], () => setIsOpen(true), {
+		enabled: !!devPanelStatus?.enabled,
+		preventDefault: true,
+		ignoreInputs: true,
+		timeout: 1000,
+	});
 
 	if (!devPanelStatus?.enabled) {
 		return null;

app/client/components/file-browsers/__tests__/snapshot-tree-browser.test.tsx

@@ -0,0 +1,244 @@
+import type { ComponentProps } from "react";
+import { afterEach, describe, expect, test } from "vitest";
+import { HttpResponse, http, server } from "~/test/msw/server";
+import { cleanup, fireEvent, render, screen, userEvent, waitFor, within } from "~/test/test-utils";
+
+type SnapshotFilesRequest = {
+	shortId: string;
+	snapshotId: string;
+	path: string | null;
+	offset: string | null;
+	limit: string | null;
+};
+
+const snapshotFiles = {
+	files: [
+		{ name: "project", path: "/mnt/project", type: "dir" },
+		{ name: "a.txt", path: "/mnt/project/a.txt", type: "file" },
+	],
+};
+
+import { SnapshotTreeBrowser } from "../snapshot-tree-browser";
+
+const mockListSnapshotFiles = (response = snapshotFiles) => {
+	const requests: SnapshotFilesRequest[] = [];
+
+	server.use(
+		http.get("/api/v1/repositories/:shortId/snapshots/:snapshotId/files", ({ params, request }) => {
+			const url = new URL(request.url);
+			requests.push({
+				shortId: String(params.shortId),
+				snapshotId: String(params.snapshotId),
+				path: url.searchParams.get("path"),
+				offset: url.searchParams.get("offset"),
+				limit: url.searchParams.get("limit"),
+			});
+
+			return HttpResponse.json(response);
+		}),
+	);
+
+	return requests;
+};
+
+const renderSnapshotTreeBrowser = (props: Partial<ComponentProps<typeof SnapshotTreeBrowser>> = {}) => {
+	return render(
+		<SnapshotTreeBrowser
+			repositoryId="repo-1"
+			snapshotId="snap-1"
+			queryBasePath="/mnt/project"
+			displayBasePath="/mnt"
+			{...props}
+		/>,
+	);
+};
+
+afterEach(() => {
+	cleanup();
+});
+
+describe("SnapshotTreeBrowser", () => {
+	test("renders the query root folder when display base path is broader than query base path", async () => {
+		mockListSnapshotFiles();
+
+		renderSnapshotTreeBrowser();
+
+		expect(await screen.findByRole("button", { name: "project" })).toBeTruthy();
+	});
+
+	test("renders ancestor folders when the query root is nested multiple levels below the display root", async () => {
+		mockListSnapshotFiles({
+			files: [
+				{ name: "subdir", path: "/mnt/project/subdir", type: "dir" },
+				{ name: "a.txt", path: "/mnt/project/subdir/a.txt", type: "file" },
+			],
+		});
+
+		renderSnapshotTreeBrowser({
+			queryBasePath: "/mnt/project/subdir",
+			displayBasePath: "/mnt",
+		});
+
+		expect(await screen.findByRole("button", { name: "project" })).toBeTruthy();
+	});
+
+	test("renders synthesized ancestor folders for a single file when no display base path is available", async () => {
+		const requests = mockListSnapshotFiles({
+			files: [{ name: "report.txt", path: "/mnt/project/report.txt", type: "file" }],
+		});
+
+		renderSnapshotTreeBrowser({
+			queryBasePath: "/mnt/project/report.txt",
+			displayBasePath: undefined,
+		});
+
+		const mntRow = await screen.findByRole("button", { name: "mnt" });
+		const mntExpandIcon = mntRow.querySelector("svg");
+		if (!mntExpandIcon) {
+			throw new Error("Expected expand icon for mnt row");
+		}
+		fireEvent.click(mntExpandIcon);
+
+		expect(await screen.findByRole("button", { name: "project" })).toBeTruthy();
+		expect(requests[0]).toEqual({
+			shortId: "repo-1",
+			snapshotId: "snap-1",
+			path: "/mnt/project/report.txt",
+			offset: null,
+			limit: null,
+		});
+	});
+
+	test("returns the ancestor folder path when selecting above the query root", async () => {
+		mockListSnapshotFiles({
+			files: [
+				{ name: "subdir", path: "/mnt/project/subdir", type: "dir" },
+				{ name: "a.txt", path: "/mnt/project/subdir/a.txt", type: "file" },
+			],
+		});
+
+		let selectedPaths: Set<string> | undefined;
+		let selectedKind: "file" | "dir" | null = null;
+
+		renderSnapshotTreeBrowser({
+			queryBasePath: "/mnt/project/subdir",
+			displayBasePath: "/mnt",
+			withCheckboxes: true,
+			onSelectionChange: (paths) => {
+				selectedPaths = paths;
+			},
+			onSingleSelectionKindChange: (kind) => {
+				selectedKind = kind;
+			},
+		});
+
+		const row = await screen.findByRole("button", { name: "project" });
+		const checkbox = within(row).getByRole("checkbox");
+
+		await userEvent.click(checkbox);
+
+		expect(selectedPaths ? Array.from(selectedPaths) : []).toEqual(["/mnt/project"]);
+		expect(selectedKind === "dir").toBe(true);
+	});
+
+	test("keeps full paths when the display root does not contain the query root", async () => {
+		mockListSnapshotFiles();
+
+		let selectedPaths: Set<string> | undefined;
+		let selectedKind: "file" | "dir" | null = null;
+
+		renderSnapshotTreeBrowser({
+			queryBasePath: "/mnt/project",
+			displayBasePath: "/other/root",
+			withCheckboxes: true,
+			onSelectionChange: (paths) => {
+				selectedPaths = paths;
+			},
+			onSingleSelectionKindChange: (kind) => {
+				selectedKind = kind;
+			},
+		});
+
+		const row = await screen.findByRole("button", { name: "mnt" });
+		const checkbox = within(row).getByRole("checkbox");
+
+		await userEvent.click(checkbox);
+
+		expect(selectedPaths ? Array.from(selectedPaths) : []).toEqual(["/mnt"]);
+		expect(selectedKind === "dir").toBe(true);
+	});
+
+	test("shows selected folder state when full paths are provided from the parent", async () => {
+		mockListSnapshotFiles();
+
+		renderSnapshotTreeBrowser({
+			withCheckboxes: true,
+			selectedPaths: new Set(["/mnt/project"]),
+			onSelectionChange: () => {},
+		});
+
+		const row = await screen.findByRole("button", { name: "project" });
+		const checkbox = within(row).getByRole("checkbox");
+
+		expect(checkbox.getAttribute("aria-checked")).toBe("true");
+	});
+
+	test("returns the full snapshot path and kind when selecting a displayed folder", async () => {
+		mockListSnapshotFiles();
+
+		let selectedPaths: Set<string> | undefined;
+		let selectedKind: "file" | "dir" | null = null;
+
+		renderSnapshotTreeBrowser({
+			withCheckboxes: true,
+			onSelectionChange: (paths) => {
+				selectedPaths = paths;
+			},
+			onSingleSelectionKindChange: (kind) => {
+				selectedKind = kind;
+			},
+		});
+
+		const row = await screen.findByRole("button", { name: "project" });
+		const checkbox = within(row).getByRole("checkbox");
+
+		await userEvent.click(checkbox);
+
+		expect(selectedPaths ? Array.from(selectedPaths) : []).toEqual(["/mnt/project"]);
+		expect(selectedKind === "dir").toBe(true);
+	});
+
+	test("uses the query base path for the initial request when display base path is broader", async () => {
+		const requests = mockListSnapshotFiles();
+
+		renderSnapshotTreeBrowser();
+
+		await waitFor(() => {
+			expect(requests[0]).toEqual({
+				shortId: "repo-1",
+				snapshotId: "snap-1",
+				path: "/mnt/project",
+				offset: null,
+				limit: null,
+			});
+		});
+	});
+
+	test("shows the query root contents when display and query roots differ", async () => {
+		mockListSnapshotFiles();
+
+		renderSnapshotTreeBrowser();
+
+		const row = await screen.findByRole("button", { name: "project" });
+		const expandIcon = row.querySelector("svg");
+		if (!expandIcon) {
+			throw new Error("Expected expand icon for folder row");
+		}
+
+		if (!screen.queryByRole("button", { name: "a.txt" })) {
+			fireEvent.click(expandIcon);
+		}
+
+		expect(await screen.findByRole("button", { name: "a.txt" })).toBeTruthy();
+	});
+});

app/client/components/file-browsers/file-browser.tsx

@@ -134,15 +134,10 @@ export const FileBrowser = (props: FileBrowserProps) => {
 	}
 
 	const bodyWithScroll = useScrollArea ? <ScrollArea className={scrollAreaClassName}>{body}</ScrollArea> : body;
-	const wrappedBody = treeContainerClassName ? (
-		<div className={treeContainerClassName}>{bodyWithScroll}</div>
-	) : (
-		bodyWithScroll
-	);
 
 	return (
 		<div className={className}>
-			{wrappedBody}
+			<div className={treeContainerClassName}>{bodyWithScroll}</div>
 			{showSelectedPathFooter && resolvedSelectedPath && (
 				<div className="bg-muted/50 border-t p-2 text-sm">
 					<div className="font-medium text-muted-foreground">{selectedPathLabel}</div>

app/client/components/file-browsers/local-file-browser.tsx

@@ -3,7 +3,8 @@ import { browseFilesystemOptions } from "~/client/api-client/@tanstack/react-que
 import { FileBrowser, type FileBrowserUiProps } from "~/client/components/file-browsers/file-browser";
 import { useFileBrowser } from "~/client/hooks/use-file-browser";
 import { parseError } from "~/client/lib/errors";
-import { normalizeAbsolutePath } from "~/utils/path";
+import { normalizeAbsolutePath } from "@zerobyte/core/utils";
+import { logger } from "~/client/lib/logger";
 
 type LocalFileBrowserProps = FileBrowserUiProps & {
 	initialPath?: string;
@@ -26,17 +27,10 @@ export const LocalFileBrowser = ({ initialPath = "/", enabled = true, ...uiProps
 			return await queryClient.ensureQueryData(browseFilesystemOptions({ query: { path } }));
 		},
 		prefetchFolder: (path) => {
-			void queryClient.prefetchQuery(browseFilesystemOptions({ query: { path } }));
+			void queryClient.prefetchQuery(browseFilesystemOptions({ query: { path } })).catch((e) => logger.error(e));
 		},
 	});
 
-	const errorDetails = parseError(error)?.message;
-	const errorMessage = errorDetails
-		? `Failed to load directories: ${errorDetails}`
-		: error
-			? "Failed to load directories"
-			: undefined;
-
 	return (
 		<FileBrowser
 			{...uiProps}
@@ -49,7 +43,7 @@ export const LocalFileBrowser = ({ initialPath = "/", enabled = true, ...uiProps
 			getFolderPagination={fileBrowser.getFolderPagination}
 			isLoading={fileBrowser.isLoading}
 			isEmpty={fileBrowser.isEmpty}
-			errorMessage={errorMessage}
+			errorMessage={parseError(error)?.message}
 			loadingMessage={uiProps.loadingMessage ?? "Loading directories..."}
 			emptyMessage={uiProps.emptyMessage ?? "No subdirectories found"}
 		/>

app/client/components/file-browsers/snapshot-tree-browser.tsx

@@ -4,106 +4,107 @@ import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-qu
 import { FileBrowser, type FileBrowserUiProps } from "~/client/components/file-browsers/file-browser";
 import { useFileBrowser } from "~/client/hooks/use-file-browser";
 import { parseError } from "~/client/lib/errors";
-import { normalizeAbsolutePath } from "~/utils/path";
+import { isPathWithin, normalizeAbsolutePath } from "@zerobyte/core/utils";
+
+function createPathPrefixFns(basePath: string) {
+	return {
+		strip(path: string) {
+			if (basePath === "/") return path;
+			if (path === basePath) return "/";
+			if (path.startsWith(`${basePath}/`)) return path.slice(basePath.length);
+			return path;
+		},
+		add(displayPath: string) {
+			if (basePath === "/") return displayPath;
+			if (displayPath === "/") return basePath;
+			return `${basePath}${displayPath}`;
+		},
+	};
+}
 
 type SnapshotTreeBrowserProps = FileBrowserUiProps & {
 	repositoryId: string;
 	snapshotId: string;
-	basePath?: string;
+	queryBasePath?: string;
+	displayBasePath?: string;
 	pageSize?: number;
 	enabled?: boolean;
 	onSingleSelectionKindChange?: (kind: "file" | "dir" | null) => void;
 };
 
-export const SnapshotTreeBrowser = ({
+export const SnapshotTreeBrowser = (props: SnapshotTreeBrowserProps) => {
-	repositoryId,
+	const {
-	snapshotId,
+		repositoryId,
-	basePath = "/",
+		snapshotId,
-	pageSize = 500,
+		queryBasePath = "/",
-	enabled = true,
+		displayBasePath,
-	...uiProps
+		pageSize = 500,
-}: SnapshotTreeBrowserProps) => {
+		enabled = true,
+		...uiProps
+	} = props;
+
 	const { selectedPaths, onSelectionChange, onSingleSelectionKindChange, ...fileBrowserUiProps } = uiProps;
 	const queryClient = useQueryClient();
-	const normalizedBasePath = normalizeAbsolutePath(basePath);
+	const normalizedQueryBasePath = normalizeAbsolutePath(queryBasePath);
+	const normalizedDisplayBasePath = normalizeAbsolutePath(displayBasePath ?? "/");
+	const effectiveDisplayBasePath = isPathWithin(normalizedDisplayBasePath, normalizedQueryBasePath)
+		? normalizedDisplayBasePath
+		: "/";
 
 	const { data, isLoading, error } = useQuery({
 		...listSnapshotFilesOptions({
 			path: { shortId: repositoryId, snapshotId },
-			query: { path: normalizedBasePath },
+			query: { path: normalizedQueryBasePath },
 		}),
 		enabled,
 	});
 
-	const stripBasePath = useCallback(
+	const displayPathFns = useMemo(() => createPathPrefixFns(effectiveDisplayBasePath), [effectiveDisplayBasePath]);
-		(path: string): string => {
-			if (normalizedBasePath === "/") return path;
-			if (path === normalizedBasePath) return "/";
-			if (path.startsWith(`${normalizedBasePath}/`)) {
-				return path.slice(normalizedBasePath.length);
-			}
-			return path;
-		},
-		[normalizedBasePath],
-	);
-
-	const addBasePath = useCallback(
-		(displayPath: string): string => {
-			if (normalizedBasePath === "/") return displayPath;
-			if (displayPath === "/") return normalizedBasePath;
-			return `${normalizedBasePath}${displayPath}`;
-		},
-		[normalizedBasePath],
-	);
 
 	const displaySelectedPaths = useMemo(() => {
 		if (!selectedPaths) return undefined;
 
 		const displayPaths = new Set<string>();
 		for (const fullPath of selectedPaths) {
-			displayPaths.add(stripBasePath(fullPath));
+			displayPaths.add(displayPathFns.strip(fullPath));
 		}
 
 		return displayPaths;
-	}, [selectedPaths, stripBasePath]);
+	}, [displayPathFns, selectedPaths]);
 
 	const fileBrowser = useFileBrowser({
 		initialData: data,
 		isLoading,
-		fetchFolder: async (path, offset = 0) => {
+		fetchFolder: async (displayPath, offset = 0) => {
 			return await queryClient.ensureQueryData(
 				listSnapshotFilesOptions({
 					path: { shortId: repositoryId, snapshotId },
-					query: {
+					query: { path: displayPath, offset: offset, limit: pageSize },
-						path,
-						offset: offset.toString(),
-						limit: pageSize.toString(),
-					},
 				}),
 			);
 		},
-		prefetchFolder: (path) => {
+		pathTransform: displayPathFns,
-			void queryClient.prefetchQuery(
-				listSnapshotFilesOptions({
-					path: { shortId: repositoryId, snapshotId },
-					query: {
-						path,
-						offset: "0",
-						limit: pageSize.toString(),
-					},
-				}),
-			);
-		},
-		pathTransform: {
-			strip: stripBasePath,
-			add: addBasePath,
-		},
 	});
 
 	const displayPathKinds = useMemo(() => {
 		const kinds = new Map<string, "file" | "dir">();
 		for (const entry of fileBrowser.fileArray) {
 			kinds.set(entry.path, entry.type === "file" ? "file" : "dir");
+
+			let parentPath = entry.path;
+			while (true) {
+				const lastSlashIndex = parentPath.lastIndexOf("/");
+				if (lastSlashIndex <= 0) {
+					break;
+				}
+
+				parentPath = parentPath.slice(0, lastSlashIndex);
+				if (kinds.has(parentPath)) {
+					continue;
+				}
+
+				kinds.set(parentPath, "dir");
+			}
 		}
 		return kinds;
 	}, [fileBrowser.fileArray]);
@@ -114,7 +115,7 @@ export const SnapshotTreeBrowser = ({
 
 			const nextFullPaths = new Set<string>();
 			for (const displayPath of nextDisplayPaths) {
-				nextFullPaths.add(addBasePath(displayPath));
+				nextFullPaths.add(displayPathFns.add(displayPath));
 			}
 
 			if (onSingleSelectionKindChange) {
@@ -132,16 +133,9 @@ export const SnapshotTreeBrowser = ({
 
 			onSelectionChange(nextFullPaths);
 		},
-		[onSelectionChange, addBasePath, onSingleSelectionKindChange, displayPathKinds],
+		[displayPathFns, displayPathKinds, onSelectionChange, onSingleSelectionKindChange],
 	);
 
-	const errorDetails = parseError(error)?.message;
-	const errorMessage = errorDetails
-		? `Failed to load files: ${errorDetails}`
-		: error
-			? "Failed to load files"
-			: undefined;
-
 	return (
 		<FileBrowser
 			{...fileBrowserUiProps}
@@ -154,7 +148,7 @@ export const SnapshotTreeBrowser = ({
 			getFolderPagination={fileBrowser.getFolderPagination}
 			isLoading={fileBrowser.isLoading}
 			isEmpty={fileBrowser.isEmpty}
-			errorMessage={errorMessage}
+			errorMessage={parseError(error)?.message}
 			loadingMessage={fileBrowserUiProps.loadingMessage ?? "Loading files..."}
 			selectedPaths={displaySelectedPaths}
 			onSelectionChange={onSelectionChange ? handleSelectionChange : undefined}

app/client/components/file-browsers/volume-file-browser.tsx

@@ -3,6 +3,7 @@ import { listFilesOptions } from "~/client/api-client/@tanstack/react-query.gen"
 import { FileBrowser, type FileBrowserUiProps } from "~/client/components/file-browsers/file-browser";
 import { useFileBrowser, type FetchFolderResult } from "~/client/hooks/use-file-browser";
 import { parseError } from "~/client/lib/errors";
+import { logger } from "~/client/lib/logger";
 
 type VolumeFileBrowserProps = FileBrowserUiProps & {
 	volumeId: string;
@@ -24,27 +25,22 @@ export const VolumeFileBrowser = ({ volumeId, enabled = true, ...uiProps }: Volu
 			return await queryClient.ensureQueryData(
 				listFilesOptions({
 					path: { shortId: volumeId },
-					query: { path, offset: offset?.toString() },
+					query: { path, offset: offset },
 				}),
 			);
 		},
 		prefetchFolder: (path) => {
-			void queryClient.prefetchQuery(
+			void queryClient
-				listFilesOptions({
+				.prefetchQuery(
-					path: { shortId: volumeId },
+					listFilesOptions({
-					query: { path },
+						path: { shortId: volumeId },
-				}),
+						query: { path },
-			);
+					}),
+				)
+				.catch((e) => logger.error(e));
 		},
 	});
 
-	const errorDetails = parseError(error)?.message;
-	const errorMessage = errorDetails
-		? `Failed to load files: ${errorDetails}`
-		: error
-			? "Failed to load files"
-			: undefined;
-
 	return (
 		<FileBrowser
 			{...uiProps}
@@ -57,7 +53,7 @@ export const VolumeFileBrowser = ({ volumeId, enabled = true, ...uiProps }: Volu
 			getFolderPagination={fileBrowser.getFolderPagination}
 			isLoading={fileBrowser.isLoading}
 			isEmpty={fileBrowser.isEmpty}
-			errorMessage={errorMessage}
+			errorMessage={parseError(error)?.message}
 			loadingMessage={uiProps.loadingMessage ?? "Loading files..."}
 			emptyMessage={uiProps.emptyMessage ?? "This volume appears to be empty."}
 		/>

app/client/components/file-tree.tsx

@@ -114,20 +114,25 @@ export const FileTree = memo((props: Props) => {
 
 	const toggleCollapseState = useCallback(
 		(fullPath: string) => {
+			const shouldExpand = collapsedFolders.has(fullPath);
+
 			setCollapsedFolders((prevSet) => {
 				const newSet = new Set(prevSet);
 
 				if (newSet.has(fullPath)) {
 					newSet.delete(fullPath);
-					onFolderExpand?.(fullPath);
 				} else {
 					newSet.add(fullPath);
 				}
 
 				return newSet;
 			});
+
+			if (shouldExpand) {
+				onFolderExpand?.(fullPath);
+			}
 		},
-		[onFolderExpand],
+		[collapsedFolders, onFolderExpand],
 	);
 
 	// Add new folders to collapsed set when file list changes
@@ -581,8 +586,10 @@ const NodeButton = memo(({ depth, icon, onClick, onMouseEnter, className, childr
 	);
 
 	return (
-		<button
+		<div
-			type="button"
+			// oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
+			role="button"
+			tabIndex={0}
 			className={cn("flex items-center gap-2 w-full pr-2 text-sm py-1.5 text-left", className)}
 			style={{ paddingLeft }}
 			onClick={onClick}
@@ -591,7 +598,7 @@ const NodeButton = memo(({ depth, icon, onClick, onMouseEnter, className, childr
 		>
 			{icon}
 			<div className="truncate w-full flex items-center gap-2">{children}</div>
-		</button>
+		</div>
 	);
 });
 
@@ -625,6 +632,10 @@ function buildFileList(files: FileEntry[], foldersOnly = false): Node[] {
 		const depth = segments.length - 1;
 		const name = segments[segments.length - 1];
 
+		if (!name) {
+			continue;
+		}
+
 		if (!fileMap.has(file.path)) {
 			const isFile = file.type === "file";
 			fileMap.set(file.path, {
@@ -636,6 +647,33 @@ function buildFileList(files: FileEntry[], foldersOnly = false): Node[] {
 				size: file.size,
 			});
 		}
+
+		let parentPath = file.path;
+		while (true) {
+			const lastSlashIndex = parentPath.lastIndexOf("/");
+			if (lastSlashIndex <= 0) {
+				break;
+			}
+
+			parentPath = parentPath.slice(0, lastSlashIndex);
+			if (fileMap.has(parentPath)) {
+				continue;
+			}
+
+			const parentSegments = parentPath.split("/").filter((segment) => segment);
+			const parentName = parentSegments[parentSegments.length - 1];
+			if (!parentName) {
+				continue;
+			}
+
+			fileMap.set(parentPath, {
+				kind: "folder",
+				id: fileMap.size,
+				name: parentName,
+				fullPath: parentPath,
+				depth: parentSegments.length - 1,
+			});
+		}
 	}
 
 	// Convert map to array and sort
@@ -702,5 +740,7 @@ function compareNodes(a: Node, b: Node): number {
 		return a.kind === "folder" ? -1 : 1;
 	}
 
-	return a.name.localeCompare(b.name);
+	if (a.name < b.name) return -1;
+	if (a.name > b.name) return 1;
+	return 0;
 }

app/client/components/grid-background.tsx

@@ -9,16 +9,17 @@ interface GridBackgroundProps {
 
 export function GridBackground({ children, className, containerClassName }: GridBackgroundProps) {
 	return (
-		<div
+		<div className={cn("relative min-h-full w-full", containerClassName)}>
-			className={cn(
+			<div
-				"relative min-h-full w-full",
+				className={cn(
-				"bg-size-[40px_40px]",
+					"pointer-events-none absolute inset-0 w-full h-full",
-				"bg-[linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+					"bg-[size:40px_40px]",
-				"dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+					"bg-[linear-gradient(to_right,rgba(0,0,0,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.04)_1px,transparent_1px)]",
-				containerClassName,
+					"dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
-			)}
+					"[mask-image:radial-gradient(ellipse_at_top,black_70%,transparent_100%)]",
-		>
+				)}
-			<div className={cn("relative container m-auto", className)}>{children}</div>
+			/>
+			<div className={cn("relative container m-auto z-10", className)}>{children}</div>
 		</div>
 	);
 }

app/client/components/layout.tsx

@@ -1,14 +1,16 @@
-import { LifeBuoy } from "lucide-react";
+import { LifeBuoy, LogOut } from "lucide-react";
 import { toast } from "sonner";
 import { type AppContext } from "~/context";
 import { GridBackground } from "./grid-background";
-import { Button } from "./ui/button";
+import { Button, buttonVariants } from "./ui/button";
 import { SidebarProvider, SidebarTrigger } from "./ui/sidebar";
 import { AppSidebar } from "./app-sidebar";
 import { authClient } from "../lib/auth-client";
 import { DevPanelListener } from "./dev-panel-listener";
 import { Outlet, useNavigate } from "@tanstack/react-router";
 import { AppBreadcrumb } from "./app-breadcrumb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { ThemeToggle } from "./theme-toggle";
 
 type Props = {
 	loaderData: AppContext;
@@ -32,36 +34,51 @@ export function Layout({ loaderData }: Props) {
 
 	return (
 		<SidebarProvider defaultOpen={loaderData.sidebarOpen}>
-			<AppSidebar />
+			<AppSidebar isInstanceAdmin={loaderData.user?.role === "admin"} />
 			<div className="w-full relative flex flex-col min-h-screen md:h-screen md:overflow-hidden">
-				<header className="z-50 bg-card-header border-b border-border/50 shrink-0">
+				<header className="z-50 bg-card-header border-b border-border/80 dark:border-border/50 shrink-0 h-16.25">
-					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container gap-4">
+					<div className="flex items-center h-full justify-between px-2 sm:px-8 mx-auto container gap-4">
 						<div className="flex items-center gap-4 min-w-0">
 							<SidebarTrigger />
 							<AppBreadcrumb />
 						</div>
 						{loaderData.user && (
-							<div className="flex items-center gap-4">
+							<div className="flex items-center bg-card dark:bg-muted/30 border border-border/80 dark:border-border/50 px-2 py-1 rounded-full shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] dark:shadow-sm">
-								<span className="text-sm text-muted-foreground hidden md:inline-flex">
+								<span className="text-sm text-muted-foreground hidden md:inline-flex pl-2 mr-5">
-									Welcome,&nbsp;
+									<span className="text-foreground">{loaderData.user.name}</span>
-									<span className="text-strong-accent">{loaderData.user?.username}</span>
 								</span>
-								<Button variant="default" size="sm" onClick={handleLogout}>
+								<ThemeToggle />
-									Logout
+								<Tooltip>
-								</Button>
+									<TooltipTrigger asChild>
-								<Button variant="default" size="sm" className="relative overflow-hidden hidden lg:inline-flex">
+										<Button
-									<a
+											variant="ghost"
-										href="https://github.com/nicotsx/zerobyte/issues/new"
+											size="icon"
-										target="_blank"
+											className="rounded-full h-7 text-xs text-muted-foreground hover:text-foreground"
-										rel="noreferrer"
+											onClick={handleLogout}
-										className="flex items-center gap-2"
+										>
-									>
+											<LogOut className="w-4 h-4" />
-										<span className="flex items-center gap-2">
+										</Button>
-											<LifeBuoy />
+									</TooltipTrigger>
-											<span>Report an issue</span>
+									<TooltipContent>Logout</TooltipContent>
-										</span>
+								</Tooltip>
-									</a>
+								<Tooltip>
-								</Button>
+									<TooltipTrigger asChild>
+										<a
+											href="https://github.com/nicotsx/zerobyte/issues/new/choose"
+											target="_blank"
+											rel="noreferrer"
+											className={buttonVariants({
+												variant: "ghost",
+												size: "icon",
+												className:
+													"relative overflow-hidden hidden lg:inline-flex rounded-full h-7 w-7 text-muted-foreground hover:text-foreground",
+											})}
+										>
+											<LifeBuoy className="w-4 h-4" />
+										</a>
+									</TooltipTrigger>
+									<TooltipContent>Report an issue</TooltipContent>
+								</Tooltip>
 							</div>
 						)}
 					</div>

app/client/components/managed-badge.tsx

@@ -0,0 +1,23 @@
+import { Badge } from "~/client/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+
+type ManagedBadgeProps = {
+	label?: string;
+	message?: string;
+};
+
+const defaultMessage =
+	"This resource is provisioned at startup. Changes are useful for testing, but the next provisioning sync can overwrite or recreate it.";
+
+export const ManagedBadge = ({ label = "Managed", message = defaultMessage }: ManagedBadgeProps) => {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Badge variant="secondary">{label}</Badge>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p className="max-w-80 text-sm">{message}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};

app/client/components/onoff.tsx

@@ -15,7 +15,7 @@ export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: P
 			className={cn(
 				"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
 				isOn
-					? "border-green-200 bg-green-50 text-green-700 dark:border-green-500/40 dark:bg-green-500/10 dark:text-green-200"
+					? "border-success/30 bg-success/10 text-success"
 					: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
 			)}
 		>

app/client/components/organization-switcher.tsx

@@ -0,0 +1,110 @@
+import { ChevronsUpDown } from "lucide-react";
+import { toast } from "sonner";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuShortcut,
+	DropdownMenuTrigger,
+} from "~/client/components/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "~/client/components/ui/sidebar";
+import { authClient } from "~/client/lib/auth-client";
+import { useMutation } from "@tanstack/react-query";
+import { useOrganizationContext } from "../hooks/use-org-context";
+
+function getOrganizationInitials(name?: string): string {
+	const trimmedName = name?.trim();
+
+	if (!trimmedName) {
+		return "O";
+	}
+
+	return trimmedName
+		.split(/\s+/)
+		.slice(0, 2)
+		.map((part) => part.charAt(0).toUpperCase())
+		.join("");
+}
+
+export function OrganizationSwitcher() {
+	const { isMobile } = useSidebar();
+	const { organizations, activeOrganization } = useOrganizationContext();
+
+	const switchOrganizationMutation = useMutation({
+		mutationFn: async (organizationId: string) => {
+			const { error } = await authClient.organization.setActive({ organizationId });
+			if (error) throw new Error(error.message);
+		},
+		onError: (error) => {
+			const message = error instanceof Error ? error.message : "Unexpected error while switching organizations";
+			toast.error("Failed to switch organization", { description: message });
+		},
+	});
+
+	if (organizations === undefined) {
+		return null;
+	}
+
+	if (organizations.length <= 1) {
+		return null;
+	}
+
+	return (
+		<SidebarMenu className="mb-3">
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<div className="bg-foreground text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg">
+								{activeOrganization?.logo ? (
+									<img
+										src={activeOrganization.logo}
+										alt={`${activeOrganization.name} logo`}
+										className="size-full object-cover"
+									/>
+								) : (
+									<span className="text-xs font-semibold">{getOrganizationInitials(activeOrganization?.name)}</span>
+								)}
+							</div>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-medium">{activeOrganization?.name}</span>
+								<span className="truncate text-xs">{organizations.length} organizations</span>
+							</div>
+							<ChevronsUpDown className="ml-auto group-data-[collapsible=icon]:hidden" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+						align="start"
+						side={isMobile ? "bottom" : "right"}
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="text-muted-foreground text-xs">Organizations</DropdownMenuLabel>
+						{organizations.map((organization) => (
+							<DropdownMenuItem
+								key={organization.id}
+								onClick={() => switchOrganizationMutation.mutate(organization.id)}
+								className="gap-2 p-2"
+								disabled={switchOrganizationMutation.isPending}
+							>
+								<div className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md border">
+									{organization.logo ? (
+										<img src={organization.logo} alt={`${organization.name} logo`} className="size-full object-cover" />
+									) : (
+										<span className="text-[10px] font-semibold">{getOrganizationInitials(organization.name)}</span>
+									)}
+								</div>
+								<span className="min-w-0 flex-1 truncate">{organization.name}</span>
+								<DropdownMenuShortcut>{organization.id === activeOrganization?.id && "Current"}</DropdownMenuShortcut>
+							</DropdownMenuItem>
+						))}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}

app/client/components/release-notes-dialog.tsx

@@ -2,7 +2,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "~/client/components/ui/dialog";
 import { ScrollArea } from "~/client/components/ui/scroll-area";
-import { formatDate } from "~/client/lib/datetime";
+import { useTimeFormat } from "~/client/lib/datetime";
 import type { UpdateInfoDto } from "~/server/modules/system/system.dto";
 
 interface ReleaseNotesDialogProps {
@@ -12,6 +12,8 @@ interface ReleaseNotesDialogProps {
 }
 
 export function ReleaseNotesDialog({ open, onOpenChange, updates }: ReleaseNotesDialogProps) {
+	const { formatDate } = useTimeFormat();
+
 	if (!updates) return null;
 
 	return (

app/client/components/repository-icon.tsx

@@ -1,5 +1,5 @@
 import { Database, HardDrive, Cloud, Server } from "lucide-react";
-import type { RepositoryBackend } from "~/schemas/restic";
+import type { RepositoryBackend } from "@zerobyte/core/restic";
 
 type Props = {
 	backend: RepositoryBackend;

app/client/components/restore-form.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
-import { ChevronDown, Download, FolderOpen, RotateCcw } from "lucide-react";
+import { AlertTriangle, ChevronDown, Download, FolderOpen, RotateCcw } from "lucide-react";
 import { Button } from "~/client/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+import { Alert, AlertDescription, AlertTitle } from "~/client/components/ui/alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
 import { Input } from "~/client/components/ui/input";
 import { Label } from "~/client/components/ui/label";
@@ -21,7 +22,8 @@ import { SnapshotTreeBrowser } from "~/client/components/file-browsers/snapshot-
 import { RestoreProgress } from "~/client/components/restore-progress";
 import { restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
 import { type RestoreCompletedEvent, useServerEvents } from "~/client/hooks/use-server-events";
-import { OVERWRITE_MODES, type OverwriteMode } from "~/schemas/restic";
+import { OVERWRITE_MODES, type OverwriteMode } from "@zerobyte/core/restic";
+import { isPathWithin } from "@zerobyte/core/utils";
 import type { Repository } from "~/client/lib/types";
 import { handleRepositoryError } from "~/client/lib/errors";
 import { useNavigate } from "@tanstack/react-router";
@@ -33,16 +35,29 @@ interface RestoreFormProps {
 	repository: Repository;
 	snapshotId: string;
 	returnPath: string;
-	basePath?: string;
+	queryBasePath?: string;
+	displayBasePath?: string;
+	hasNonPosixSnapshotPaths?: boolean;
 }
 
-export function RestoreForm({ repository, snapshotId, returnPath, basePath }: RestoreFormProps) {
+export function RestoreForm({
+	repository,
+	snapshotId,
+	returnPath,
+	queryBasePath,
+	displayBasePath,
+	hasNonPosixSnapshotPaths = false,
+}: RestoreFormProps) {
 	const navigate = useNavigate();
 	const { addEventListener } = useServerEvents();
 
-	const volumeBasePath = basePath ?? "/";
+	const snapshotBasePath = queryBasePath ?? "/";
+	const hasMismatchedDisplayBasePath = displayBasePath && !isPathWithin(displayBasePath, snapshotBasePath);
+	const restoreRequiresCustomTarget = hasNonPosixSnapshotPaths || hasMismatchedDisplayBasePath;
 
-	const [restoreLocation, setRestoreLocation] = useState<RestoreLocation>("original");
+	const [restoreLocation, setRestoreLocation] = useState<RestoreLocation>(
+		restoreRequiresCustomTarget ? "custom" : "original",
+	);
 	const [customTargetPath, setCustomTargetPath] = useState("");
 	const [overwriteMode, setOverwriteMode] = useState<OverwriteMode>("always");
 	const [showAdvanced, setShowAdvanced] = useState(false);
@@ -54,6 +69,15 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 
 	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
 	const [selectedPathKind, setSelectedPathKind] = useState<"file" | "dir" | null>(null);
+	const trimmedCustomTargetPath = customTargetPath.trim();
+	const hasCustomTargetPath = trimmedCustomTargetPath !== "";
+	const selectedPathCount = selectedPaths.size;
+
+	useEffect(() => {
+		if (restoreRequiresCustomTarget) {
+			setRestoreLocation("custom");
+		}
+	}, [restoreRequiresCustomTarget]);
 
 	useEffect(() => {
 		const abortController = new AbortController();
@@ -113,13 +137,13 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 	});
 
 	const handleRestore = useCallback(() => {
-		const excludeXattrArray = excludeXattr
+		const excludeXattrValues = excludeXattr
-			?.split(",")
+			.split(",")
-			.map((s) => s.trim())
+			.map((value) => value.trim())
 			.filter(Boolean);
 
 		const isCustomLocation = restoreLocation === "custom";
-		const targetPath = isCustomLocation && customTargetPath.trim() ? customTargetPath.trim() : undefined;
+		const targetPath = isCustomLocation && hasCustomTargetPath ? trimmedCustomTargetPath : undefined;
 
 		const includePaths = Array.from(selectedPaths);
 
@@ -133,7 +157,8 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 			body: {
 				snapshotId,
 				include: includePaths.length > 0 ? includePaths : undefined,
-				excludeXattr: excludeXattrArray && excludeXattrArray.length > 0 ? excludeXattrArray : undefined,
+				selectedItemKind: includePaths.length === 1 ? (selectedPathKind ?? undefined) : undefined,
+				excludeXattr: excludeXattrValues.length > 0 ? excludeXattrValues : undefined,
 				targetPath,
 				overwrite: overwriteMode,
 			},
@@ -142,38 +167,32 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 		repository.shortId,
 		snapshotId,
 		excludeXattr,
+		hasCustomTargetPath,
 		restoreLocation,
-		customTargetPath,
+		trimmedCustomTargetPath,
 		selectedPaths,
+		selectedPathKind,
 		overwriteMode,
 		restoreSnapshot,
 	]);
 
 	const handleDownload = useCallback(() => {
-		if (selectedPaths.size > 1) {
+		if (selectedPaths.size > 1) return;
-			return;
-		}
 
-		const dumpUrl = new URL(
+		const url = new URL(
 			`/api/v1/repositories/${repository.shortId}/snapshots/${snapshotId}/dump`,
 			window.location.origin,
 		);
 
-		if (selectedPaths.size === 1) {
+		const [selectedPath] = selectedPaths;
-			const [selectedPath] = selectedPaths;
+		if (selectedPath) {
-			if (selectedPath) {
+			url.searchParams.set("path", selectedPath);
-				dumpUrl.searchParams.set("path", selectedPath);
+			if (selectedPathKind) {
-				if (selectedPathKind) {
+				url.searchParams.set("kind", selectedPathKind);
-					dumpUrl.searchParams.set("kind", selectedPathKind);
-				}
 			}
 		}
 
-		const link = document.createElement("a");
+		window.location.assign(url.toString());
-		link.href = dumpUrl.toString();
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
 	}, [repository.shortId, snapshotId, selectedPathKind, selectedPaths]);
 
 	const acknowledgeRestoreResult = useCallback(() => {
@@ -187,13 +206,15 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 		}
 	}, []);
 
-	const canRestore = restoreLocation === "original" || customTargetPath.trim();
+	const canRestore = restoreRequiresCustomTarget
-	const canDownload = selectedPaths.size <= 1;
+		? hasCustomTargetPath
+		: restoreLocation === "original" || hasCustomTargetPath;
+	const canDownload = selectedPathCount <= 1;
 	const isRestoreRunning = isRestoring || isRestoreActive;
 
 	function getDownloadButtonText(): string {
-		if (selectedPaths.size > 0) {
+		if (selectedPathCount > 0) {
-			return `Download ${selectedPaths.size} ${selectedPaths.size === 1 ? "item" : "items"}`;
+			return `Download ${selectedPathCount} ${selectedPathCount === 1 ? "item" : "items"}`;
 		}
 		return "Download All";
 	}
@@ -202,8 +223,8 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 		if (isRestoreRunning) {
 			return "Restoring...";
 		}
-		if (selectedPaths.size > 0) {
+		if (selectedPathCount > 0) {
-			return `Restore ${selectedPaths.size} ${selectedPaths.size === 1 ? "item" : "items"}`;
+			return `Restore ${selectedPathCount} ${selectedPathCount === 1 ? "item" : "items"}`;
 		}
 		return "Restore All";
 	}
@@ -245,6 +266,18 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 				<div className="space-y-6">
 					{isRestoreRunning && <RestoreProgress repositoryId={repository.shortId} snapshotId={snapshotId} />}
 
+					{restoreRequiresCustomTarget && (
+						<Alert variant="warning">
+							<AlertTriangle className="size-4" />
+							<AlertTitle>Source paths do not match</AlertTitle>
+							<AlertDescription>
+								This snapshot was created from source paths that do not match this Zerobyte server or the current linked
+								volume. Restoring to the original location is unavailable. Restore it to a custom location, or download
+								it instead.
+							</AlertDescription>
+						</Alert>
+					)}
+
 					<Card>
 						<CardHeader>
 							<CardTitle>Restore Location</CardTitle>
@@ -258,6 +291,7 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 									size="sm"
 									className="flex justify-start gap-2"
 									onClick={() => setRestoreLocation("original")}
+									disabled={!!restoreRequiresCustomTarget}
 								>
 									<RotateCcw size={16} className="mr-1" />
 									Original location
@@ -352,7 +386,8 @@ export function RestoreForm({ repository, snapshotId, returnPath, basePath }: Re
 						<SnapshotTreeBrowser
 							repositoryId={repository.shortId}
 							snapshotId={snapshotId}
-							basePath={volumeBasePath}
+							queryBasePath={snapshotBasePath}
+							displayBasePath={displayBasePath}
 							pageSize={500}
 							className="flex flex-1 min-h-0 flex-col"
 							treeContainerClassName="overflow-auto flex-1 min-h-0 border border-border rounded-md bg-card m-4"

app/client/components/restore-progress.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
 import { ByteSize } from "~/client/components/bytes-size";
+import { useFormatBytes } from "~/client/hooks/use-format-bytes";
+import { useRootLoaderData } from "~/client/hooks/use-root-loader-data";
 import { Card } from "~/client/components/ui/card";
 import { Progress } from "~/client/components/ui/progress";
 import { type RestoreProgressEvent, useServerEvents } from "~/client/hooks/use-server-events";
-import { formatBytes } from "~/utils/format-bytes";
 import { formatDuration } from "~/utils/utils";
 
 type Props = {
@@ -12,6 +13,8 @@ type Props = {
 };
 
 export const RestoreProgress = ({ repositoryId, snapshotId }: Props) => {
+	const formatBytes = useFormatBytes();
+	const { locale } = useRootLoaderData();
 	const { addEventListener } = useServerEvents();
 	const [progress, setProgress] = useState<RestoreProgressEvent | null>(null);
 
@@ -71,9 +74,9 @@ export const RestoreProgress = ({ repositoryId, snapshotId }: Props) => {
 				<div>
 					<p className="text-xs uppercase text-muted-foreground">Files</p>
 					<p className="font-medium">
-						{progress.files_restored.toLocaleString()}
+						{progress.files_restored.toLocaleString(locale)}
 						&nbsp;/&nbsp;
-						{progress.total_files.toLocaleString()}
+						{progress.total_files.toLocaleString(locale)}
 					</p>
 				</div>
 				<div>

app/client/components/snapshots-table.tsx

@@ -25,8 +25,8 @@ import {
 	DialogTitle,
 } from "~/client/components/ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { useTimeFormat } from "~/client/lib/datetime";
 import { formatDuration } from "~/utils/utils";
-import { formatDateTime } from "~/client/lib/datetime";
 import {
 	deleteSnapshotsMutation,
 	listSnapshotsQueryKey,
@@ -49,6 +49,7 @@ type Props = {
 export const SnapshotsTable = ({ snapshots, repositoryId, backups, listSnapshotsQueryOptions }: Props) => {
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
+	const { formatDateTime } = useTimeFormat();
 
 	const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 	const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);

app/client/components/status-dot.tsx

@@ -12,8 +12,8 @@ interface StatusDotProps {
 export const StatusDot = ({ variant, label, animated }: StatusDotProps) => {
 	const statusMapping = {
 		success: {
-			color: "bg-green-500",
+			color: "bg-success shadow-[0_0_8px_rgba(16,185,129,0.5)]",
-			colorLight: "bg-emerald-400",
+			colorLight: "bg-success/60",
 			animated: animated ?? true,
 		},
 		neutral: {
@@ -40,12 +40,12 @@ export const StatusDot = ({ variant, label, animated }: StatusDotProps) => {
 
 	return (
 		<Tooltip>
-			<TooltipTrigger>
+			<TooltipTrigger asChild aria-label={label}>
 				<span className="relative flex size-3 mx-auto">
 					{statusMapping?.animated && (
 						<span
 							className={cn(
-								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								"absolute inline-flex h-full w-full animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite] rounded-full opacity-50",
 								`${statusMapping.colorLight}`,
 							)}
 						/>
@@ -54,7 +54,7 @@ export const StatusDot = ({ variant, label, animated }: StatusDotProps) => {
 				</span>
 			</TooltipTrigger>
 			<TooltipContent>
-				<p>{label}</p>
+				<p className="capitalize">{label}</p>
 			</TooltipContent>
 		</Tooltip>
 	);

app/client/components/theme-provider.tsx

@@ -0,0 +1,35 @@
+import { createContext, useCallback, useContext, useState } from "react";
+
+type Theme = "light" | "dark";
+
+type ThemeContextValue = {
+	theme: Theme;
+	setTheme: (theme: Theme) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export const THEME_COOKIE_NAME = "theme";
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+const DEFAULT_THEME: Theme = "dark";
+
+export function ThemeProvider({ children, initialTheme }: { children: React.ReactNode; initialTheme?: Theme }) {
+	const [theme, setThemeState] = useState<Theme>(initialTheme ?? DEFAULT_THEME);
+
+	const setTheme = useCallback((newTheme: Theme) => {
+		setThemeState(newTheme);
+		document.cookie = `${THEME_COOKIE_NAME}=${newTheme}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
+		document.documentElement.classList.toggle("dark", newTheme === "dark");
+		document.documentElement.style.colorScheme = newTheme;
+	}, []);
+
+	return <ThemeContext value={{ theme, setTheme }}>{children}</ThemeContext>;
+}
+
+export function useTheme() {
+	const context = useContext(ThemeContext);
+	if (!context) {
+		throw new Error("useTheme must be used within a ThemeProvider");
+	}
+	return context;
+}

app/client/components/theme-toggle.tsx

@@ -0,0 +1,26 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "./theme-provider";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export function ThemeToggle() {
+	const { theme, setTheme } = useTheme();
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="relative rounded-full h-7 w-7 text-muted-foreground hover:text-foreground"
+					onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+					aria-label="Toggle theme"
+				>
+					<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>Toggle theme</TooltipContent>
+		</Tooltip>
+	);
+}

app/client/components/time-ago.tsx

@@ -0,0 +1,12 @@
+import { useTimeFormat, type DateInput } from "~/client/lib/datetime";
+
+type Props = {
+	date: DateInput;
+	className?: string;
+};
+
+export function TimeAgo({ date, className }: Props) {
+	const { formatTimeAgo } = useTimeFormat();
+
+	return <span className={className}>{formatTimeAgo(date)}</span>;
+}

app/client/components/ui/alert-dialog.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import type * as React from "react";
 import { buttonVariants } from "~/client/components/ui/button";

app/client/components/ui/badge.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import type * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";

app/client/components/ui/breadcrumb.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import type * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
@@ -12,17 +13,16 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 	return (
 		<ol
 			data-slot="breadcrumb-list"
-			className={cn(
+			className={cn("text-muted-foreground flex items-center gap-1.5 text-sm sm:gap-2.5 min-w-0", className)}
-				"text-muted-foreground flex items-center gap-1.5 text-sm sm:gap-2.5 min-w-0",
-				className,
-			)}
 			{...props}
 		/>
 	);
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5 min-w-0", className)} {...props} />;
+	return (
+		<li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5 min-w-0", className)} {...props} />
+	);
 }
 
 function BreadcrumbLink({

app/client/components/ui/button.tsx

@@ -7,16 +7,16 @@ import { cn } from "~/client/lib/utils";
 import { useMinimumDuration } from "~/client/hooks/useMinimumDuration";
 
 const buttonVariants = cva(
-	"inline-flex cursor-pointer uppercase rounded-sm items-center justify-center gap-2 whitespace-nowrap text-xs font-semibold tracking-wide transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring border-0",
+	"inline-flex cursor-pointer uppercase rounded-sm items-center justify-center gap-2 whitespace-nowrap text-xs font-semibold tracking-wide transition-all active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring border-0",
 	{
 		variants: {
 			variant: {
-				default: "bg-transparent text-white hover:bg-[#3A3A3A]/80 border dark:text-white dark:hover:bg-[#3A3A3A]/80",
+				default: "bg-transparent text-foreground hover:bg-muted border hover:border-border",
 				primary: "bg-strong-accent text-white hover:bg-strong-accent/90 focus-visible:ring-strong-accent/50",
 				destructive:
-					"border border-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/50 text-destructive hover:text-white",
+					"border border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground focus-visible:ring-destructive/50",
 				outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
-				secondary: "bg-transparent text-white hover:bg-[#3A3A3A]/80 border dark:text-white dark:hover:bg-[#3A3A3A]/80",
+				secondary: "bg-transparent text-foreground hover:bg-muted border",
 				ghost: "hover:bg-accent hover:text-accent-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},

app/client/components/ui/card.tsx

@@ -1,23 +1,35 @@
+// fallow-ignore-file unused-export
 import type * as React from "react";
 
 import { cn } from "~/client/lib/utils";
 
-function Card({ className, children, ...props }: React.ComponentProps<"div">) {
+function Card({ className, children, interactive, ...props }: React.ComponentProps<"div"> & { interactive?: boolean }) {
 	return (
 		<div
 			data-slot="card"
-			className={cn("bg-card text-card-foreground relative flex flex-col gap-6 border-2 py-6 shadow-sm", className)}
+			className={cn(
+				"bg-card text-card-foreground group relative flex flex-col gap-6 border border-border py-6 shadow-[0_8px_30px_-15px_rgba(0,0,0,0.04)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02)] transition-colors duration-300 ",
+				className,
+			)}
 			{...props}
 		>
-			<span aria-hidden="true" className="pointer-events-none absolute inset-0 z-10 select-none">
+			<span
-				<span className="absolute -left-0.5 -top-0.5 h-0.5 w-4 bg-white/80" />
+				aria-hidden="true"
-				<span className="absolute -left-0.5 -top-0.5 h-4 w-0.5 bg-white/80" />
+				className={cn(
-				<span className="absolute -right-0.5 -top-0.5 h-0.5 w-4 bg-white/80" />
+					"pointer-events-none absolute inset-0 z-10 select-none opacity-30 transition-opacity duration-300 ",
-				<span className="absolute -right-0.5 -top-0.5 h-4 w-0.5 bg-white/80" />
+					{
-				<span className="absolute -left-0.5 -bottom-0.5 h-0.5 w-4 bg-white/80" />
+						"group-hover:opacity-100": interactive,
-				<span className="absolute -left-0.5 -bottom-0.5 h-4 w-0.5 bg-white/80" />
+					},
-				<span className="absolute -right-0.5 -bottom-0.5 h-0.5 w-4 bg-white/80" />
+				)}
-				<span className="absolute -right-0.5 -bottom-0.5 h-4 w-0.5 bg-white/80" />
+			>
+				<span className="absolute -left-0.5 -top-0.5 h-0.5 w-4 bg-foreground" />
+				<span className="absolute -left-0.5 -top-0.5 h-4 w-0.5 bg-foreground" />
+				<span className="absolute -right-0.5 -top-0.5 h-0.5 w-4 bg-foreground" />
+				<span className="absolute -right-0.5 -top-0.5 h-4 w-0.5 bg-foreground" />
+				<span className="absolute -left-0.5 -bottom-0.5 h-0.5 w-4 bg-foreground" />
+				<span className="absolute -left-0.5 -bottom-0.5 h-4 w-0.5 bg-foreground" />
+				<span className="absolute -right-0.5 -bottom-0.5 h-0.5 w-4 bg-foreground" />
+				<span className="absolute -right-0.5 -bottom-0.5 h-4 w-0.5 bg-foreground" />
 			</span>
 			{children}
 		</div>

app/client/components/ui/chart.tsx

@@ -1,13 +1,16 @@
+// fallow-ignore-file unused-export
 // @ts-nocheck
 // biome-ignore-all lint: reason
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
+import { useRootLoaderData } from "~/client/hooks/use-root-loader-data";
 import { cn } from "~/client/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
 
+// fallow-ignore-next-line unused-type
 export type ChartConfig = {
 	[k in string]: {
 		label?: React.ReactNode;
@@ -116,6 +119,7 @@ function ChartTooltipContent({
 		labelKey?: string;
 	}) {
 	const { config } = useChart();
+	const { locale } = useRootLoaderData();
 
 	const tooltipLabel = React.useMemo(() => {
 		if (hideLabel || !payload?.length) {
@@ -205,7 +209,7 @@ function ChartTooltipContent({
 											</div>
 											{item.value && (
 												<span className="text-foreground font-mono font-medium tabular-nums">
-													{item.value.toLocaleString()}
+													{item.value.toLocaleString(locale)}
 												</span>
 											)}
 										</div>

app/client/components/ui/checkbox.tsx

@@ -1,10 +1,13 @@
-import type * as React from "react";
+import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 
+import { useWebHaptics } from "web-haptics/react";
 import { cn } from "~/client/lib/utils";
 
 function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	const trigger = useWebHaptics().trigger;
+
 	return (
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
@@ -12,6 +15,10 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
 				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
+			onCheckedChange={(checked) => {
+				void trigger([{ duration: 8 }], { intensity: 0.3 });
+				props.onCheckedChange?.(checked);
+			}}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator

app/client/components/ui/code-block.tsx

@@ -8,8 +8,8 @@ interface CodeBlockProps {
 
 export const CodeBlock: React.FC<CodeBlockProps> = ({ code, filename }) => {
 	return (
-		<div className="overflow-hidden rounded-sm bg-card-header ring-1 ring-white/10">
+		<div className="overflow-hidden rounded-sm bg-card-header ring-1 ring-border">
-			<div className="flex items-center justify-between border-b border-white/10 px-4 py-2 text-xs">
+			<div className="flex items-center justify-between border-b border-border px-4 py-2 text-xs">
 				<div className="flex items-center gap-1.5">
 					<span className="h-2.5 w-2.5 rounded-full bg-rose-500" />
 					<span className="h-2.5 w-2.5 rounded-full bg-amber-500" />
@@ -18,7 +18,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ code, filename }) => {
 				</div>
 			</div>
 			<pre className="text-xs m-0 px-4 py-2 bg-card-header">
-				<code className="text-white/80 select-all">{code}</code>
+				<code className="text-foreground/80 select-all">{code}</code>
 			</pre>
 		</div>
 	);

app/client/components/ui/dialog.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import type * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";

app/client/components/ui/dropdown-menu.tsx

@@ -0,0 +1,218 @@
+// fallow-ignore-file unused-export
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+import { cn } from "~/client/lib/utils";
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};

app/client/components/ui/form.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import * as React from "react";
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";

app/client/components/ui/input-otp.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
 
 import { cn } from "~/client/lib/utils";
 
@@ -55,12 +54,8 @@ function InputOTPSlot({
 	);
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<"hr">) {
-	return (
+	return <hr data-slot="input-otp-separator" {...props} />;
-		<div data-slot="input-otp-separator" role="separator" {...props}>
-			<MinusIcon />
-		</div>
-	);
 }
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

app/client/components/ui/input.tsx

@@ -9,6 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 			data-slot="input"
 			className={cn(
 				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				// "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-black/5 dark:bg-white/5 flex h-9 w-full min-w-0 border-0 px-3 py-1 text-sm shadow-xs dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 				className,

app/client/components/ui/scroll-area.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import type * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 

app/client/components/ui/secret-input.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import { Eye, EyeOff } from "lucide-react";
 import type * as React from "react";
 import { useMemo, useState } from "react";
@@ -14,7 +15,7 @@ export const isStoredSecretValue = (value?: string): boolean => {
 	return value.startsWith("env://") || value.startsWith("file://") || value.startsWith("encv1:");
 };
 
-type SecretInputProps = Omit<React.ComponentProps<typeof Input>, "type">
+type SecretInputProps = Omit<React.ComponentProps<typeof Input>, "type">;
 
 export const SecretInput = ({ className, value, ...props }: SecretInputProps) => {
 	const [revealed, setRevealed] = useState(false);
@@ -36,12 +37,7 @@ export const SecretInput = ({ className, value, ...props }: SecretInputProps) =>
 
 	return (
 		<div className="relative" data-secret-input>
-			<Input
+			<Input {...props} value={value} type={type} className={cn(!showAsPlaintext && "pr-10", className)} />
-				{...props}
-				value={value}
-				type={type}
-				className={cn(!showAsPlaintext && "pr-10", className)}
-			/>
 			{!showAsPlaintext && (
 				<Button
 					type="button"

app/client/components/ui/select.tsx

@@ -1,19 +1,73 @@
-import type * as React from "react";
+// fallow-ignore-file unused-export
+import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 import { cn } from "~/client/lib/utils";
 
-function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+const SelectSsrValueContext = React.createContext<{
-	return <SelectPrimitive.Root data-slot="select" {...props} />;
+	hydrated: boolean;
+	items: Map<string, React.ReactNode>;
+	value: string | undefined;
+} | null>(null);
+
+function collectSelectItems(children: React.ReactNode, items = new Map<string, React.ReactNode>()) {
+	for (const child of React.Children.toArray(children)) {
+		if (!React.isValidElement<{ children?: React.ReactNode; value?: string }>(child)) {
+			continue;
+		}
+
+		if ((child.type === SelectItem || child.type === SelectPrimitive.Item) && typeof child.props.value === "string") {
+			items.set(child.props.value, child.props.children);
+		}
+
+		if (child.props.children) {
+			collectSelectItems(child.props.children, items);
+		}
+	}
+
+	return items;
+}
+
+function Select({ children, value, ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	const [hydrated, setHydrated] = React.useState(false);
+	const items = collectSelectItems(children);
+
+	React.useEffect(() => {
+		setHydrated(true);
+	}, []);
+
+	return (
+		<SelectSsrValueContext.Provider value={{ hydrated, items, value }}>
+			<SelectPrimitive.Root data-slot="select" value={value} {...props}>
+				{children}
+			</SelectPrimitive.Root>
+		</SelectSsrValueContext.Provider>
+	);
 }
 
 function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+function SelectValue({ children, placeholder, style, ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+	const context = React.useContext(SelectSsrValueContext);
+	const selectedItem =
+		context?.value !== undefined && context.value !== "" ? context.items.get(context.value) : undefined;
+
+	if (!context?.hydrated) {
+		return (
+			<span data-slot="select-value" {...props} style={{ pointerEvents: "none", ...style }}>
+				{children ?? selectedItem ?? placeholder}
+			</span>
+		);
+	}
+
+	return (
+		<SelectPrimitive.Value data-slot="select-value" placeholder={placeholder} style={style} {...props}>
+			{children}
+		</SelectPrimitive.Value>
+	);
 }
 
 function SelectTrigger({
@@ -21,19 +75,35 @@ function SelectTrigger({
 	size = "default",
 	children,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
 	size?: "sm" | "default";
 }) {
+	const context = React.useContext(SelectSsrValueContext);
+	const hasValue = context?.value !== undefined && context.value !== "";
+	const triggerClassName = cn(
+		"border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&+select[aria-hidden=true]]:hidden [&:has(+select[aria-hidden=true]:last-child)]:mb-0",
+		className,
+	);
+
+	if (!context?.hydrated) {
+		return (
+			<div
+				id={props.id}
+				aria-disabled="true"
+				aria-invalid={props["aria-invalid"]}
+				data-placeholder={hasValue ? undefined : ""}
+				data-size={size}
+				data-slot="select-trigger"
+				className={triggerClassName}
+			>
+				{children}
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</div>
+		);
+	}
+
 	return (
-		<SelectPrimitive.Trigger
+		<SelectPrimitive.Trigger data-slot="select-trigger" data-size={size} className={triggerClassName} {...props}>
-			data-slot="select-trigger"
-			data-size={size}
-			className={cn(
-				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		>
 			{children}
 			<SelectPrimitive.Icon asChild>
 				<ChevronDownIcon className="size-4 opacity-50" />

app/client/components/ui/sheet.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 "use client";
 
 import type * as React from "react";

app/client/components/ui/sidebar.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 "use client";
 
 import * as React from "react";
@@ -344,7 +345,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="sidebar-content"
 			data-sidebar="content"
 			className={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[collapsible=icon]:overflow-hidden",
 				className,
 			)}
 			{...props}
@@ -565,10 +566,16 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<"div"> & {
 	showIcon?: boolean;
 }) {
-	// Random width between 50 to 90%.
+	const skeletonId = React.useId();
 	const width = React.useMemo(() => {
-		return `${Math.floor(Math.random() * 40) + 50}%`;
+		let hash = 0;
-	}, []);
+
+		for (const char of skeletonId) {
+			hash = (hash * 31 + char.charCodeAt(0)) % 40;
+		}
+
+		return `${hash + 50}%`;
+	}, [skeletonId]);
 
 	return (
 		<div

app/client/components/ui/sonner.tsx

@@ -1,8 +1,8 @@
-import { useTheme } from "next-themes";
+import { useTheme } from "~/client/components/theme-provider";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-	const { theme = "dark" } = useTheme();
+	const { theme } = useTheme();
 
 	return (
 		<Sonner

app/client/components/ui/switch.tsx

@@ -1,9 +1,12 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import type * as React from "react";
+import * as React from "react";
 
+import { useWebHaptics } from "web-haptics/react";
 import { cn } from "~/client/lib/utils";
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	const trigger = useWebHaptics().trigger;
+
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
@@ -11,6 +14,10 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
 				"cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
+			onCheckedChange={(checked) => {
+				void trigger([{ duration: 8 }], { intensity: 0.3 });
+				props.onCheckedChange?.(checked);
+			}}
 			{...props}
 		>
 			<SwitchPrimitive.Thumb

app/client/components/ui/table.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file unused-export
 import type * as React from "react";
 
 import { cn } from "~/client/lib/utils";

app/client/components/ui/tabs.tsx

@@ -1,6 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import type * as React from "react";
 
+import { useWebHaptics } from "web-haptics/react";
 import { cn } from "~/client/lib/utils";
 
 function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
@@ -17,7 +18,14 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
 	);
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, onClick, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	const { trigger } = useWebHaptics();
+
+	const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+		void trigger([{ duration: 8 }], { intensity: 0.3 });
+		onClick?.(event);
+	};
+
 	return (
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
@@ -29,24 +37,25 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 				// Padding: 20px horizontal (8px for bracket tick + 12px gap to text)
 				"px-5",
 				// Transparent orange background for active state
-				"data-[state=active]:bg-[#FF453A]/10",
+				"data-[state=active]:bg-strong-accent/10",
 				// Left bracket - vertical line
-				"before:absolute before:left-0 before:top-0 before:h-7 before:w-0.5 before:bg-[#5D6570] before:transition-colors data-[state=active]:before:bg-[#FF453A]",
+				"before:absolute before:left-0 before:top-0 before:h-7 before:w-0.5 before:bg-muted-foreground/60 before:transition-colors data-[state=active]:before:bg-strong-accent",
 				// Left bracket - top tick
-				"after:absolute after:left-0 after:top-[-1px] after:w-2 after:h-0.5 after:bg-[#5D6570] after:transition-colors data-[state=active]:after:bg-[#FF453A]",
+				"after:absolute after:left-0 after:-top-px after:w-2 after:h-0.5 after:bg-muted-foreground/60 after:transition-colors data-[state=active]:after:bg-strong-accent",
 				className,
 			)}
+			onClick={handleClick}
 			{...props}
 		>
 			<span className="relative z-10">{props.children}</span>
 			{/* Left bracket - bottom tick */}
-			<span className="absolute left-0 bottom-[-1px] h-0.5 w-2 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			<span className="absolute left-0 bottom-[-1px] h-0.5 w-2 bg-muted-foreground/60 transition-colors group-data-[state=active]:bg-strong-accent" />
 			{/* Right bracket - top tick */}
-			<span className="absolute right-0 top-[-1px] h-0.5 w-2 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			<span className="absolute right-0 top-[-1px] h-0.5 w-2 bg-muted-foreground/60 transition-colors group-data-[state=active]:bg-strong-accent" />
 			{/* Right bracket - vertical line */}
-			<span className="absolute right-0 top-0 h-7 w-0.5 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			<span className="absolute right-0 top-0 h-7 w-0.5 bg-muted-foreground/60 transition-colors group-data-[state=active]:bg-strong-accent" />
 			{/* Right bracket - bottom tick */}
-			<span className="absolute right-0 bottom-[-1px] h-0.5 w-2 bg-[#5D6570] transition-colors group-data-[state=active]:bg-[#FF453A]" />
+			<span className="absolute right-0 bottom-[-1px] h-0.5 w-2 bg-muted-foreground/60 transition-colors group-data-[state=active]:bg-strong-accent" />
 		</TabsPrimitive.Trigger>
 	);
 }

app/client/components/volume-icon.tsx

@@ -1,5 +1,5 @@
 import { Cloud, Folder, Server } from "lucide-react";
-import type { BackendType } from "~/schemas/volumes";
+import type { BackendType } from "@zerobyte/contracts/volumes";
 
 type VolumeIconProps = {
 	backend: BackendType;
@@ -49,7 +49,7 @@ export const VolumeIcon = ({ backend }: VolumeIconProps) => {
 	const { icon: Icon, label } = getIconAndLabel(backend);
 
 	return (
-		<span className={`flex items-center gap-2 rounded-md px-2 py-1`}>
+		<span className={`flex items-center gap-2 rounded-md py-1`}>
 			<Icon className="h-4 w-4" />
 			{label}
 		</span>

app/client/components/webhook-request-preview.tsx

@@ -0,0 +1,25 @@
+import { CodeBlock } from "~/client/components/ui/code-block";
+import { Label } from "~/client/components/ui/label";
+
+type WebhookRequestPreviewProps = {
+	method: string;
+	url?: string;
+	contentType?: string;
+	headers?: string[];
+	body: string;
+};
+
+export const WebhookRequestPreview = ({ method, url, contentType, headers, body }: WebhookRequestPreviewProps) => {
+	const headerLines = [contentType ? `Content-Type: ${contentType}` : undefined, ...(headers ?? [])].filter(Boolean);
+	const previewCode = `${method} ${url || "https://api.example.com/webhook"}${headerLines.length > 0 ? `\n${headerLines.join("\n")}` : ""}
+
+${body}`;
+
+	return (
+		<div className="space-y-2 pt-4 border-t">
+			<Label>Request Preview</Label>
+			<CodeBlock code={previewCode} filename="HTTP Request" />
+			<p className="text-[0.8rem] text-muted-foreground">This is a preview of the HTTP request that will be sent.</p>
+		</div>
+	);
+};

app/client/functions/__tests__/is-secure-context.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vitest";
+import { getIsSecureContextForRequest, isSecureContextOrigin } from "../is-secure-context";
+
+describe("isSecureContextOrigin", () => {
+	test("treats HTTPS and loopback HTTP origins as secure contexts", () => {
+		expect(isSecureContextOrigin("https://example.com")).toBe(true);
+		expect(isSecureContextOrigin("http://localhost:3000")).toBe(true);
+		expect(isSecureContextOrigin("http://app.localhost")).toBe(true);
+		expect(isSecureContextOrigin("http://127.0.0.1:3000")).toBe(true);
+		expect(isSecureContextOrigin("http://[::1]:3000")).toBe(true);
+	});
+
+	test("treats non-local HTTP origins as insecure contexts", () => {
+		expect(isSecureContextOrigin("http://example.com")).toBe(false);
+		expect(isSecureContextOrigin("http://127.example.com")).toBe(false);
+	});
+});
+
+describe("getIsSecureContextForRequest", () => {
+	test("uses forwarded protocol and host when present", () => {
+		const request = new Request("http://internal.local/settings", {
+			headers: {
+				host: "internal.local",
+				"x-forwarded-host": "zerobyte.example.com",
+				"x-forwarded-proto": "https",
+			},
+		});
+
+		expect(getIsSecureContextForRequest(request)).toBe(true);
+	});
+
+	test("uses the request URL when forwarded headers are absent", () => {
+		expect(getIsSecureContextForRequest(new Request("http://zerobyte.example.com/settings"))).toBe(false);
+		expect(getIsSecureContextForRequest(new Request("https://zerobyte.example.com/settings"))).toBe(true);
+	});
+});

app/client/functions/get-origin.ts

@@ -0,0 +1,6 @@
+import { createServerFn } from "@tanstack/react-start";
+import { config } from "~/server/core/config";
+
+export const getOrigin = createServerFn().handler(() => {
+	return config.baseUrl;
+});

app/client/functions/is-secure-context.ts

@@ -0,0 +1,51 @@
+import { createIsomorphicFn } from "@tanstack/react-start";
+import { getRequest } from "@tanstack/react-start/server";
+import ipaddr from "ipaddr.js";
+
+const getFirstHeaderValue = (value: string | null) => value?.split(",")[0]?.trim();
+
+const isLoopbackIp = (hostname: string) => {
+	try {
+		return ipaddr.parse(hostname).range() === "loopback";
+	} catch {
+		return false;
+	}
+};
+
+const getRequestOrigin = (request: Request) => {
+	const requestUrl = new URL(request.url);
+	const forwardedProto = getFirstHeaderValue(request.headers.get("x-forwarded-proto"));
+	const forwardedHost = getFirstHeaderValue(request.headers.get("x-forwarded-host"));
+	const host = forwardedHost || getFirstHeaderValue(request.headers.get("host"));
+
+	if (!host) {
+		return requestUrl.origin;
+	}
+
+	const protocol = (forwardedProto || requestUrl.protocol).replace(/:$/, "");
+	return `${protocol}://${host}`;
+};
+
+export const isSecureContextOrigin = (origin: string) => {
+	const url = new URL(origin);
+
+	if (url.protocol === "https:") {
+		return true;
+	}
+
+	const hostname = url.hostname.replace(/^\[(.*)\]$/, "$1").toLowerCase();
+
+	return hostname === "localhost" || hostname.endsWith(".localhost") || isLoopbackIp(hostname);
+};
+
+export const getIsSecureContextForRequest = (request: Request) => isSecureContextOrigin(getRequestOrigin(request));
+
+export const getIsSecureContext = createIsomorphicFn()
+	.server(() => {
+		try {
+			return getIsSecureContextForRequest(getRequest());
+		} catch {
+			return true;
+		}
+	})
+	.client(() => window.isSecureContext ?? true);

app/client/hooks/__tests__/use-server-events.test.tsx

@@ -0,0 +1,141 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { cleanup, createTestQueryClient, render, screen } from "~/test/test-utils";
+import { useServerEvents } from "../use-server-events";
+
+class MockEventSource {
+	static instances: MockEventSource[] = [];
+
+	public onerror: ((event: Event) => void) | null = null;
+	public close = vi.fn(() => {});
+	private listeners = new Map<string, Set<(event: Event) => void>>();
+
+	constructor(public url: string) {
+		MockEventSource.instances.push(this);
+	}
+
+	addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+		const listeners = this.listeners.get(type) ?? new Set<(event: Event) => void>();
+		const callback = typeof listener === "function" ? listener : (event: Event) => listener.handleEvent(event);
+		listeners.add(callback);
+		this.listeners.set(type, listeners);
+	}
+
+	emit(type: string, data: unknown) {
+		const event = new MessageEvent(type, {
+			data: JSON.stringify(data),
+		});
+		for (const listener of this.listeners.get(type) ?? []) {
+			listener(event);
+		}
+	}
+
+	static reset() {
+		MockEventSource.instances = [];
+	}
+}
+
+const originalEventSource = globalThis.EventSource;
+const originalConsoleInfo = console.info;
+const originalConsoleError = console.error;
+
+const ConnectionConsumer = ({ enabled = true }: { enabled?: boolean }) => {
+	useServerEvents({ enabled });
+	return null;
+};
+
+const BackupCompletedListener = ({ scheduleId }: { scheduleId: string }) => {
+	const { addEventListener } = useServerEvents();
+	const [status, setStatus] = useState("pending");
+
+	useEffect(() => {
+		const abortController = new AbortController();
+
+		addEventListener(
+			"backup:completed",
+			(event) => {
+				if (event.scheduleId === scheduleId) {
+					setStatus(event.status);
+				}
+			},
+			{ signal: abortController.signal },
+		);
+
+		return () => abortController.abort();
+	}, [addEventListener, scheduleId]);
+
+	return <div>{status}</div>;
+};
+
+const QueryStatusConsumer = ({ getValue }: { getValue: () => string }) => {
+	const { data } = useQuery({
+		queryKey: ["backup-status"],
+		queryFn: async () => getValue(),
+	});
+
+	return <div>{data}</div>;
+};
+
+describe("useServerEvents", () => {
+	beforeEach(() => {
+		MockEventSource.reset();
+		globalThis.EventSource = MockEventSource as unknown as typeof EventSource;
+		console.info = vi.fn(() => {});
+		console.error = vi.fn(() => {});
+	});
+
+	afterEach(() => {
+		cleanup();
+		globalThis.EventSource = originalEventSource;
+		console.info = originalConsoleInfo;
+		console.error = originalConsoleError;
+		MockEventSource.reset();
+	});
+
+	test("shares one EventSource across consumers and refreshes active queries on backup completion", async () => {
+		const queryClient = createTestQueryClient();
+		let queryValue = "before";
+
+		const view = render(
+			<>
+				<ConnectionConsumer />
+				<BackupCompletedListener scheduleId="0b9c940b" />
+				<QueryStatusConsumer getValue={() => queryValue} />
+			</>,
+			{ queryClient },
+		);
+
+		expect(MockEventSource.instances).toHaveLength(1);
+		expect(await screen.findByText("before")).toBeTruthy();
+
+		queryValue = "after";
+
+		MockEventSource.instances[0]?.emit("backup:completed", {
+			organizationId: "default-org",
+			scheduleId: "0b9c940b",
+			volumeName: "synology",
+			repositoryName: "swiss-backup",
+			status: "success",
+		});
+
+		expect(await screen.findByText("success")).toBeTruthy();
+		expect(await screen.findByText("after")).toBeTruthy();
+
+		view.unmount();
+
+		expect(MockEventSource.instances[0]?.close).toHaveBeenCalledTimes(1);
+	});
+
+	test("waits to subscribe until enabled", () => {
+		const queryClient = createTestQueryClient();
+		const view = render(<ConnectionConsumer enabled={false} />, { queryClient });
+
+		expect(MockEventSource.instances).toHaveLength(0);
+
+		view.rerender(<ConnectionConsumer />);
+
+		expect(MockEventSource.instances).toHaveLength(1);
+		expect(MockEventSource.instances[0]?.url).toBe("/api/v1/events");
+	});
+});