@futo-org/backups-orchestrator-ui 0.3.1 → 0.5.0

package/dist/components/backends/BackendItem.svelte

@@ -5,7 +5,10 @@
     LocalRepositoryDto,
     RepositoryBackendDto,
   } from "../../fetch-client";
-  import { getBackendActions } from "../../services/backend.service";
+  import {
+    getBackendActions,
+    useYuccaLogin,
+  } from "../../services/backend.service";
   import { Badge, Icon, Text } from "@immich/ui";
   import { mdiCloudOutline, mdiHarddisk, mdiShieldCheckOutline } from "@mdi/js";
   import StackListItem from "../ui/StackListItem.svelte";
@@ -30,8 +33,12 @@
     s3: "S3 Server",
   };
 
+  const yuccaLogin = useYuccaLogin();
+
   const { LoginAgain, Reconfigure } = $derived(
-    getBackendActions(repository, backend, repositoryBackend),
+    getBackendActions(repository, backend, repositoryBackend, () =>
+      yuccaLogin.mutate(undefined),
+    ),
   );
 </script>
 

package/dist/components/backends/BackendsList.svelte

@@ -3,9 +3,9 @@
   import { options } from "../../options";
   import {
     handleSetupLocalStorage,
-    handleYuccaLogin,
     useBackendEventHandler,
     useBackends,
+    useYuccaLogin,
   } from "../../services/backend.service";
   import { Button, HStack } from "@immich/ui";
   import StackList from "../ui/StackList.svelte";
@@ -21,6 +21,7 @@
 
   const { advanced } = options;
   const query = useBackends();
+  const yuccaLogin = useYuccaLogin();
   const { onBackendCreate } = useBackendEventHandler();
 
   const repositoryBackends = $derived(
@@ -61,8 +62,11 @@
 
   {#if $advanced}
     <HStack>
-      <Button size="small" variant="outline" onclick={() => handleYuccaLogin()}
-        >Login with FUTO Backups</Button
+      <Button
+        size="small"
+        variant="outline"
+        loading={yuccaLogin.isPending}
+        onclick={() => yuccaLogin.mutate(undefined)}>Login with FUTO Backups</Button
       >
       <Button
         size="small"

package/dist/components/backends/dialogs/OAuthDeviceFlowModal.svelte

@@ -13,6 +13,7 @@
     ModalFooter,
     Stack,
     Text,
+    toastManager,
     VStack,
   } from "@immich/ui";
   import { mdiContentCopy } from "@mdi/js";
@@ -35,6 +36,11 @@
     onClose();
   }
 
+  function onDeviceFlowFailure() {
+    toastManager.danger("Failed to log into FUTO Backups");
+    onClose();
+  }
+
   function onOpen() {
     window.open(verificationUri, "_blank");
   }
@@ -44,7 +50,7 @@
   }
 </script>
 
-<OnEvents {onBackendCreate} />
+<OnEvents {onBackendCreate} {onDeviceFlowFailure} />
 
 <Modal title="Logging into FUTO Backups" icon={false} {onClose}>
   <ModalBody>

package/dist/components/backends/dialogs/SelectBackendModal.svelte

@@ -4,13 +4,14 @@
   import Suspense from "../../util/Suspense.svelte";
   import {
     handleSetupLocalStorage,
-    handleYuccaLogin,
     useBackends,
+    useYuccaLogin,
   } from "../../../services/backend.service";
   import {
     Button,
     HStack,
     Icon,
+    LoadingSpinner,
     Modal,
     ModalBody,
     ModalFooter,
@@ -37,6 +38,7 @@
   }: Props = $props();
 
   const backends = useBackends();
+  const yuccaLogin = useYuccaLogin();
 
   const onFutoBackups = () => {
     const futoBackend = backends.data!.find(
@@ -46,7 +48,7 @@
     if (futoBackend) {
       onSelect(futoBackend.id);
     } else {
-      handleYuccaLogin(onSelect);
+      yuccaLogin.mutate(onSelect);
     }
   };
 
@@ -63,7 +65,7 @@
 
       <Suspense query={backends}>
         <StackList>
-          <StackListItem {disabled} onclick={onFutoBackups}>
+          <StackListItem disabled={disabled || yuccaLogin.isPending} onclick={onFutoBackups}>
             {#snippet icon()}
               <Icon icon={mdiShieldCheck} size="36px" />
             {/snippet}
@@ -74,10 +76,14 @@
             </Stack>
 
             {#snippet trailing()}
-              <Icon icon={mdiChevronRight} />
+              {#if yuccaLogin.isPending}
+                <LoadingSpinner />
+              {:else}
+                <Icon icon={mdiChevronRight} />
+              {/if}
             {/snippet}
           </StackListItem>
-          <StackListItem {disabled} onclick={onLocalBackups}>
+          <StackListItem disabled={disabled || yuccaLogin.isPending} onclick={onLocalBackups}>
             {#snippet icon()}
               <Icon icon={mdiHarddisk} size="36px" />
             {/snippet}
@@ -95,7 +101,7 @@
           {#each backends.data as backend}
             {#if backend.type === "local"}
               <StackListItem
-                {disabled}
+                disabled={disabled || yuccaLogin.isPending}
                 onclick={() => {
                   onSelect(backend.id);
                 }}

package/dist/components/integrations/immich/ImmichManageBackupOverview.svelte

@@ -53,9 +53,9 @@
         <Heading size="tiny">Your library</Heading>
         <Text>
           {#if repository.meter}
-            Estimated <FormatBytes bytes={repository.meter.sizeBytes} />
+            <FormatBytes bytes={repository.meter.sizeBytes} />
           {:else}
-            <FormatBytes bytes={repository.metrics.sizeBytes} />
+            Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
           {/if} &middot;
           <span class="lowercase"
             >{cronstrue.toString(schedule.cron, {

package/dist/components/integrations/immich/ImmichOnboardingRestoreFlow.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
   import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
+  import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
   import RestorePointFlow from "../../onboarding/restore-point-flow/RestorePointFlow.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
   import {
@@ -19,6 +21,7 @@
 
   let status: OnboardingStatusResponseDto | undefined = $state();
   let stage:
+    | "telemetry"
     | "key-import"
     | "backup-service"
     | "restore-point"
@@ -28,48 +31,55 @@
     handleOnboardingStatus().then((data) => {
       status = data;
 
-      if (data.hasOnboardedKey) {
-        if (data.hasBackend) {
-          stage = "restore-point";
-        } else {
-          stage = "backup-service";
-        }
+      if (data.status !== "ready") {
+        return;
+      }
+
+      if (data.hasTelemetry === "none") {
+        stage = "telemetry";
+      } else if (data.hasOnboardedKey) {
+        stage = data.hasBackend ? "restore-point" : "backup-service";
       }
     });
   });
 
   const onKeyImported = async () => {
     await handleConfirmRecoveryKey();
-
-    if (status?.hasBackend) {
-      stage = "restore-point";
-    } else {
-      stage = "backup-service";
-    }
+    stage = status?.hasBackend ? "restore-point" : "backup-service";
   };
 </script>
 
-{#if typeof status === "object"}
-  {#if stage === "key-import"}
-    <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
-  {:else if stage === "backup-service"}
-    <OnboardingStageBackupServices
-      onNext={() => (stage = "restore-point")}
-      onCancel={onExit}
-      restore
-    />
-  {:else if stage === "key-reimport"}
-    <OnboardingStageKeyImport
-      onImported={() => (stage = "restore-point")}
-      onCancel={() => (stage = "restore-point")}
-    />
-  {:else if stage === "restore-point"}
-    <RestorePointFlow
-      onImportKey={() => (stage = "key-reimport")}
-      onCancel={onExit}
-      {onFinish}
-    />
-  {/if}
-{:else}
+{#if status === undefined || status.status === "not-ready"}
   <LoadingSpinner />
+{:else if status.status === "error"}
+  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+{:else if stage === "telemetry"}
+  <OnboardingStageTelemetry
+    onContinue={() =>
+      (stage = status?.hasOnboardedKey
+        ? status.hasBackend
+          ? "restore-point"
+          : "backup-service"
+        : "key-import")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-import"}
+  <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
+{:else if stage === "backup-service"}
+  <OnboardingStageBackupServices
+    onNext={() => (stage = "restore-point")}
+    onCancel={onExit}
+    restore
+  />
+{:else if stage === "key-reimport"}
+  <OnboardingStageKeyImport
+    onImported={() => (stage = "restore-point")}
+    onCancel={() => (stage = "restore-point")}
+  />
+{:else if stage === "restore-point"}
+  <RestorePointFlow
+    onImportKey={() => (stage = "key-reimport")}
+    onCancel={onExit}
+    {onFinish}
+  />
 {/if}

package/dist/components/integrations/immich/ImmichOnboardingSetupFlow.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
   import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
   import OnboardingStageKeyConfirm from "../../onboarding/stages/OnboardingStageKeyConfirm.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
   import OnboardingStageKeyIntro from "../../onboarding/stages/OnboardingStageKeyIntro.svelte";
   import OnboardingStageSaveKey from "../../onboarding/stages/OnboardingStageKeySave.svelte";
+  import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
   import OnboardingStageWelcome from "../../onboarding/stages/OnboardingStageWelcome.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
   import {
@@ -28,6 +30,7 @@
   let status: OnboardingStatusResponseDto | undefined = $state();
   let stage:
     | `welcome`
+    | `telemetry`
     | `key-${"intro" | "save" | "confirm" | "import"}`
     | `backup-${"service" | "confirm" | "create"}`
     | `finished` = $state("welcome");
@@ -36,12 +39,17 @@
     handleOnboardingStatus().then(async (data) => {
       status = data;
 
+      if (data.status !== "ready") {
+        return;
+      }
+
       if (data.hasOnboardedKey) {
-        if (data.hasBackup) {
-          stage = "finished";
-        } else {
-          stage = "backup-service";
-        }
+        stage =
+          data.hasTelemetry === "none"
+            ? "telemetry"
+            : data.hasBackup
+              ? "finished"
+              : "backup-service";
       } else {
         const { recoveryKey } = await handleCurrentRecoveryKey();
         code = recoveryKey;
@@ -60,54 +68,64 @@
   };
 </script>
 
-{#if typeof status === "object"}
-  {#if stage === "finished"}
-    {@render children()}
-  {:else if stage === "welcome"}
-    <OnboardingStageWelcome
-      onNext={() => (stage = "key-intro")}
-      onImportKey={() => (stage = "key-import")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-import"}
-    <OnboardingStageKeyImport
-      onStart={() => (stage = "welcome")}
-      onImported={() => (stage = "key-confirm")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-intro"}
-    <OnboardingStageKeyIntro
-      onNext={() => (stage = "key-save")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-save"}
-    <OnboardingStageSaveKey
-      {code}
-      onNext={() => (stage = "key-confirm")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-confirm"}
-    <OnboardingStageKeyConfirm
-      {code}
-      onBack={() => (stage = "key-save")}
-      onCancel={onExit}
-      {onConfirmKey}
-    />
-  {:else if stage === "backup-service"}
-    <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
-  {:else if stage === "backup-confirm"}
-    <ImmichConfirmDefaultBackup
-      onCustomize={() => (stage = "backup-create")}
-      onConfirm={() => (stage = "finished")}
-      onCancel={onExit}
-    />
-  {:else if stage === "backup-create"}
-    <ImmichConfigureBackup
-      onFinish={() => (stage = "finished")}
-      onCancel={onExit}
-      {backendId}
-    />
-  {/if}
-{:else}
+{#if status === undefined || status.status === "not-ready"}
   <LoadingSpinner />
+{:else if status.status === "error"}
+  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+{:else if stage === "finished"}
+  {@render children()}
+{:else if stage === "welcome"}
+  <OnboardingStageWelcome
+    onNext={() => (stage = status?.hasTelemetry === "none" ? "telemetry" : "key-intro")}
+    onImportKey={() => (stage = "key-import")}
+    onCancel={onExit}
+  />
+{:else if stage === "telemetry"}
+  <OnboardingStageTelemetry
+    onContinue={() =>
+      (stage = status?.hasOnboardedKey
+        ? status.hasBackup
+          ? "finished"
+          : "backup-service"
+        : "key-intro")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-import"}
+  <OnboardingStageKeyImport
+    onStart={() => (stage = "welcome")}
+    onImported={() => (stage = "key-confirm")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-intro"}
+  <OnboardingStageKeyIntro
+    onNext={() => (stage = "key-save")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-save"}
+  <OnboardingStageSaveKey
+    {code}
+    onNext={() => (stage = "key-confirm")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-confirm"}
+  <OnboardingStageKeyConfirm
+    {code}
+    onBack={() => (stage = "key-save")}
+    onCancel={onExit}
+    {onConfirmKey}
+  />
+{:else if stage === "backup-service"}
+  <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
+{:else if stage === "backup-confirm"}
+  <ImmichConfirmDefaultBackup
+    onCustomize={() => (stage = "backup-create")}
+    onConfirm={() => (stage = "finished")}
+    onCancel={onExit}
+  />
+{:else if stage === "backup-create"}
+  <ImmichConfigureBackup
+    onFinish={() => (stage = "finished")}
+    onCancel={onExit}
+    {backendId}
+  />
 {/if}

package/dist/components/onboarding/OnboardingBootstrapError.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { useReportError } from "../../services/onboarding.service";
+
+  type Props = {
+    error?: string;
+    onQuit: () => void;
+  };
+
+  const { error, onQuit }: Props = $props();
+
+  const mutation = useReportError();
+
+  const onReportAndQuit = () =>
+    mutation.mutate(undefined, { onSuccess: onQuit });
+</script>
+
+<Modal size="small" title="Something went wrong" onClose={onQuit} icon={false}>
+  <ModalBody>
+    <Stack>
+      <Text>We ran into an error setting up backups...</Text>
+      {#if error}
+        <Text size="small" color="danger" class="font-mono whitespace-pre-wrap"
+          >{error}</Text
+        >
+      {/if}
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button
+        color="danger"
+        onclick={onReportAndQuit}
+        loading={mutation.isPending}>Report error and quit</Button
+      >
+      <Button variant="ghost" onclick={onQuit} disabled={mutation.isPending}
+        >Go back</Button
+      >
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/OnboardingBootstrapError.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    error?: string;
+    onQuit: () => void;
+};
+declare const OnboardingBootstrapError: import("svelte").Component<Props, {}, "">;
+type OnboardingBootstrapError = ReturnType<typeof OnboardingBootstrapError>;
+export default OnboardingBootstrapError;

package/dist/components/onboarding/OnboardingGate.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { LoadingSpinner } from "@immich/ui";
   import { onMount, type Snippet } from "svelte";
+  import OnboardingBootstrapError from "./OnboardingBootstrapError.svelte";
   import SampleOnboarding from "./SampleOnboarding.svelte";
   import type { OnboardingStatusResponseDto } from "../../fetch-client";
   import { handleOnboardingStatus } from "../../services/onboarding.service";
@@ -13,14 +14,16 @@
 
   const { onExit, onFinish, children }: Props = $props();
 
-  let status: OnboardingStatusResponseDto | undefined = $state();
+  let onboarding: OnboardingStatusResponseDto | undefined = $state();
 
   onMount(() => {
-    handleOnboardingStatus().then((data) => (status = data));
+    handleOnboardingStatus().then((data) => (onboarding = data));
   });
 
   function onSkip() {
-    status = {
+    onboarding = {
+      status: "ready",
+      hasTelemetry: "full",
       hasBackend: true,
       hasOnboardedKey: true,
       hasBackup: true,
@@ -30,19 +33,19 @@
   }
 </script>
 
-{#if typeof status === "object"}
-  {#if !(status.hasBackend && status.hasOnboardedKey && (status.hasSkippedExtraConfig || (status.hasBackup && status.hasSchedule)))}
-    <SampleOnboarding
-      {status}
-      onFinish={() => (onFinish ? onFinish() : onSkip())}
-      onCancel={() => {
-        onSkip();
-        onExit();
-      }}
-    />
-  {:else}
-    {@render children()}
-  {/if}
-{:else}
+{#if onboarding === undefined || onboarding.status === "not-ready"}
   <LoadingSpinner />
+{:else if onboarding.status === "error"}
+  <OnboardingBootstrapError error={onboarding.error} onQuit={onExit} />
+{:else if onboarding.hasTelemetry === "none" || !(onboarding.hasBackend && onboarding.hasOnboardedKey && (onboarding.hasSkippedExtraConfig || (onboarding.hasBackup && onboarding.hasSchedule)))}
+  <SampleOnboarding
+    status={onboarding}
+    onFinish={() => (onFinish ? onFinish() : onSkip())}
+    onCancel={() => {
+      onSkip();
+      onExit();
+    }}
+  />
+{:else}
+  {@render children()}
 {/if}

package/dist/components/onboarding/SampleOnboarding.svelte

@@ -13,6 +13,7 @@
   import ImportKey from "./stages/OnboardingStageKeyImport.svelte";
   import KeyIntro from "./stages/OnboardingStageKeyIntro.svelte";
   import SaveKey from "./stages/OnboardingStageKeySave.svelte";
+  import Telemetry from "./stages/OnboardingStageTelemetry.svelte";
   import Welcome from "./stages/OnboardingStageWelcome.svelte";
 
   type Props = {
@@ -28,17 +29,20 @@
   // svelte-ignore state_referenced_locally
   let stage:
     | "welcome"
+    | "telemetry"
     | `key-${"intro" | "save" | "confirm" | "import"}`
     | "backup-service"
     | "backup-create"
     | "schedule-create" = $state(
     !status.hasOnboardedKey
       ? "welcome"
-      : !status.hasBackend
-        ? "backup-service"
-        : !status.hasBackup
-          ? "backup-create"
-          : "schedule-create",
+      : status.hasTelemetry === "none"
+        ? "telemetry"
+        : !status.hasBackend
+          ? "backup-service"
+          : !status.hasBackup
+            ? "backup-create"
+            : "schedule-create",
   );
 
   onMount(() => {
@@ -65,10 +69,22 @@
 
 {#if stage === "welcome"}
   <Welcome
-    onNext={() => (stage = "key-intro")}
+    onNext={() => (stage = status.hasTelemetry === "none" ? "telemetry" : "key-intro")}
     onImportKey={() => (stage = "key-import")}
     {onCancel}
   />
+{:else if stage === "telemetry"}
+  <Telemetry
+    onContinue={() =>
+      (stage = !status.hasOnboardedKey
+        ? "key-intro"
+        : !status.hasBackend
+          ? "backup-service"
+          : !status.hasBackup
+            ? "backup-create"
+            : "schedule-create")}
+    {onCancel}
+  />
 {:else if stage === "key-intro"}
   <KeyIntro onNext={() => (stage = "key-save")} {onCancel} />
 {:else if stage === "key-save"}

package/dist/components/onboarding/stages/OnboardingStageBackupServices.svelte

@@ -3,12 +3,13 @@
   import StackListItem from "../../ui/StackListItem.svelte";
   import {
     handleSetupLocalStorage,
-    handleYuccaLogin,
+    useYuccaLogin,
   } from "../../../services/backend.service";
   import {
     Button,
     HStack,
     Icon,
+    LoadingSpinner,
     Modal,
     ModalBody,
     ModalFooter,
@@ -25,8 +26,10 @@
 
   const { restore = false, onNext, onCancel }: Props = $props();
 
+  const yuccaLogin = useYuccaLogin();
+
   function onFutoBackups() {
-    handleYuccaLogin(onNext);
+    yuccaLogin.mutate(onNext);
   }
 
   function onLocalBackups() {
@@ -44,7 +47,7 @@
 >
   <ModalBody>
     <StackList>
-      <StackListItem onclick={onFutoBackups}>
+      <StackListItem disabled={yuccaLogin.isPending} onclick={onFutoBackups}>
         {#snippet icon()}
           <Icon icon={mdiShieldCheck} size="36px" />
         {/snippet}
@@ -55,10 +58,14 @@
         </Stack>
 
         {#snippet trailing()}
-          <Icon icon={mdiChevronRight} />
+          {#if yuccaLogin.isPending}
+            <LoadingSpinner />
+          {:else}
+            <Icon icon={mdiChevronRight} />
+          {/if}
         {/snippet}
       </StackListItem>
-      <StackListItem onclick={onLocalBackups}>
+      <StackListItem disabled={yuccaLogin.isPending} onclick={onLocalBackups}>
         {#snippet icon()}
           <Icon icon={mdiHarddisk} size="36px" />
         {/snippet}

package/dist/components/onboarding/stages/OnboardingStageTelemetry.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { useEnableTelemetry } from "../../../services/onboarding.service";
+  import { mdiChartBox, mdiEyeOff } from "@mdi/js";
+
+  type Props = {
+    onContinue: () => void;
+    onCancel: () => void;
+  };
+
+  const { onContinue, onCancel }: Props = $props();
+
+  const mutation = useEnableTelemetry();
+
+  const onConfirm = () => mutation.mutate(undefined, { onSuccess: onContinue });
+</script>
+
+<Modal
+  size="small"
+  title="Telemetry required for closed beta"
+  onClose={onCancel}
+>
+  <ModalBody>
+    <Stack>
+      <HStack>
+        <Icon icon={mdiChartBox} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          We collect usage and diagnostic data to understand how FUTO Backups is
+          used and to find problems.</Text
+        >
+      </HStack>
+      <HStack>
+        <Icon icon={mdiEyeOff} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          Your photos, files, and recovery key are never collected and never
+          leave your device unencrypted.</Text
+        >
+      </HStack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button onclick={onConfirm} loading={mutation.isPending}>Continue</Button>
+      <Button
+        variant="ghost"
+        onclick={onCancel}
+        disabled={mutation.isPending}>Cancel</Button
+      >
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/stages/OnboardingStageTelemetry.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onContinue: () => void;
+    onCancel: () => void;
+};
+declare const OnboardingStageTelemetry: import("svelte").Component<Props, {}, "">;
+type OnboardingStageTelemetry = ReturnType<typeof OnboardingStageTelemetry>;
+export default OnboardingStageTelemetry;

package/dist/fetch-client.d.ts

@@ -82,7 +82,12 @@ export type ConfigureImmichIntegrationRequestDto = {
     libraries: "all" | string[];
     retentionPolicy?: (RetentionPolicyDto) | null;
 };
+export type BootstrapStatus = "not-ready" | "ready" | "error";
+export type TelemetryLevel = "full" | "none";
 export type OnboardingStatusResponseDto = {
+    status: BootstrapStatus;
+    error?: string;
+    hasTelemetry: TelemetryLevel;
     hasOnboardedKey: boolean;
     hasBackend: boolean;
     hasBackup: boolean;
@@ -269,6 +274,8 @@ export declare function currentRecoveryKey(opts?: Oazapfts.RequestOpts): Promise
 export declare function importRecoveryKey(importRecoveryKeyRequest: ImportRecoveryKeyRequest, opts?: Oazapfts.RequestOpts): Promise<never>;
 export declare function confirmRecoveryKey(opts?: Oazapfts.RequestOpts): Promise<never>;
 export declare function skipOnboardingExtraConfig(opts?: Oazapfts.RequestOpts): Promise<never>;
+export declare function enableTelemetry(opts?: Oazapfts.RequestOpts): Promise<never>;
+export declare function reportError(opts?: Oazapfts.RequestOpts): Promise<never>;
 export declare function createRepository(repositoryCreateRequestDto: RepositoryCreateRequestDto, { backend }?: {
     backend?: string;
 }, opts?: Oazapfts.RequestOpts): Promise<RepositoryCreateResponseDto>;

package/dist/fetch-client.js

@@ -85,6 +85,18 @@ export function skipOnboardingExtraConfig(opts) {
         method: "POST"
     }));
 }
+export function enableTelemetry(opts) {
+    return oazapfts.ok(oazapfts.fetchText("/api/yucca/onboarding/telemetry", {
+        ...opts,
+        method: "POST"
+    }));
+}
+export function reportError(opts) {
+    return oazapfts.ok(oazapfts.fetchText("/api/yucca/onboarding/report-error", {
+        ...opts,
+        method: "POST"
+    }));
+}
 export function createRepository(repositoryCreateRequestDto, { backend } = {}, opts) {
     return oazapfts.ok(oazapfts.fetchJson(`/api/yucca/repository${QS.query(QS.explode({
         backend

package/dist/services/backend.service.d.ts

@@ -10,14 +10,14 @@ export declare const useBackendEventHandler: () => {
         backend: BackendDto;
     }>): void;
 };
-export declare const handleYuccaLogin: (onCreate?: (backendId: string) => void) => Promise<void>;
+export declare const useYuccaLogin: () => import("@tanstack/svelte-query").CreateMutationResult<void, Error, ((backendId: string) => void) | undefined, unknown>;
 export declare const handleSetupLocalStorage: (onCreate?: (backendId: string) => void) => void;
 export declare const useCreateLocalBackend: () => import("@tanstack/svelte-query").CreateMutationResult<import("../fetch-client").BackendResponseDto, Error, CreateLocalBackendRequestDto, unknown>;
 export declare const handleReconfigureRepositoryBackend: (repository: LocalRepositoryDto) => Promise<void>;
 export declare const handleRemoveRepositoryBackend: (_backend: BackendDto, _repositoryBackend: RepositoryBackendDto) => void;
 export declare const getBackendActions: (repository: LocalRepositoryDto | undefined, backend: BackendDto, repositoryBackend?: RepositoryBackendDto & {
     primary?: boolean;
-}) => {
+}, onLogin?: () => void) => {
     LoginAgain: ActionItem;
     Reconfigure: ActionItem;
     Remove: ActionItem;

package/dist/services/backend.service.js

@@ -29,20 +29,18 @@ export const useBackendEventHandler = () => {
         },
     };
 };
-export const handleYuccaLogin = async (onCreate) => {
-    try {
-        const response = await oidcDeviceFlow();
-        void modalManager.show(OAuthDeviceFlow, {
-            ...response,
-            onCreate,
-        });
-        window.open(response.verificationUri, '_blank');
-    }
-    catch (error) {
-        handleError(error, 'Failed to start login');
-        throw error;
-    }
+const startYuccaLogin = async (onCreate) => {
+    const response = await oidcDeviceFlow();
+    void modalManager.show(OAuthDeviceFlow, {
+        ...response,
+        onCreate,
+    });
+    window.open(response.verificationUri, '_blank');
 };
+export const useYuccaLogin = () => createMutation(() => ({
+    mutationFn: (onCreate) => startYuccaLogin(onCreate),
+    onError: (error) => handleError(error, 'Failed to start login'),
+}), () => queryClient);
 export const handleSetupLocalStorage = (onCreate) => {
     void modalManager.show(CreateLocalBackend, { onCreate });
 };
@@ -58,11 +56,11 @@ export const handleReconfigureRepositoryBackend = async (repository) => {
 export const handleRemoveRepositoryBackend = (_backend, _repositoryBackend) => {
     alert('TODO: implement me when multi-repository-backend support is added');
 };
-export const getBackendActions = (repository, backend, repositoryBackend) => {
+export const getBackendActions = (repository, backend, repositoryBackend, onLogin) => {
     const LoginAgain = {
         icon: mdiLogin,
         title: 'Login again',
-        onAction: () => void handleYuccaLogin(),
+        onAction: () => onLogin?.(),
         $if: () => backend.type === 'yucca' && !backend.isOnline,
     };
     const Reconfigure = {

package/dist/services/onboarding.service.d.ts

@@ -9,3 +9,5 @@ export declare const handleCurrentRecoveryKey: () => Promise<sdk.CurrentRecovery
 export declare const handleConfirmRecoveryKey: () => Promise<void>;
 export declare const handleImportRecoveryKey: (dto: ImportRecoveryKeyRequest) => Promise<void>;
 export declare const handleSkipOnboardingExtraConfig: () => Promise<void>;
+export declare const useEnableTelemetry: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, void, unknown>;
+export declare const useReportError: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, void, unknown>;

package/dist/services/onboarding.service.js

@@ -1,7 +1,7 @@
 import { sdk } from '..';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
-import { createQuery } from '@tanstack/svelte-query';
+import { createMutation, createQuery } from '@tanstack/svelte-query';
 export const recoveryKeyKeys = {
     all: ['recovery-key'],
 };
@@ -54,3 +54,11 @@ export const handleSkipOnboardingExtraConfig = async () => {
         throw error;
     }
 };
+export const useEnableTelemetry = () => createMutation(() => ({
+    mutationFn: () => sdk.enableTelemetry(),
+    onError: (error) => handleError(error, 'Failed to save preferences'),
+}), () => queryClient);
+export const useReportError = () => createMutation(() => ({
+    mutationFn: () => sdk.reportError(),
+    onError: (error) => handleError(error, 'Failed to report error'),
+}), () => queryClient);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@futo-org/backups-orchestrator-ui",
   "repository": "https://github.com/immich-app/yucca",
   "description": "Backups orchestrator (UI library)",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -64,7 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.7.2",
     "socket.io-client": "^4.8.3",
-    "@futo-org/backups-api-client": "^0.3.1"
+    "@futo-org/backups-api-client": "^0.5.0"
   },
   "scripts": {
     "dev": "vite dev --port 5174",