fix(ui): give the onboarding wizard a real Drive folder browser

The first-run setup wizard's "Choose Drive folder" button called
pick_drive_folder(account, null), which the backend resolves to the My
Drive root and returns with current_folder_id="root" and an always-empty
current_folder_path. The wizard rendered its confirmation via
v-if="setup.driveFolderPath" (always empty), so the click produced no
visible feedback and the button looked broken; there was also no folder
navigation at all - it silently targeted the entire My Drive root with no
way to pick a subfolder.

The working breadcrumb folder browser lived only in AddSourceWizard, so
the two flows had drifted and only the setup-wizard copy was broken.

Extract that browser into a shared DriveFolderPicker (breadcrumb
navigation + folder list + a live "Backing up to: My Drive / ..."
destination line) and use it in BOTH the setup wizard and the Settings
"Add source" wizard. Onboarding now has real folder navigation and
visible feedback, and the duplication that caused the drift is gone.

- new ui/src/components/DriveFolderPicker.vue (v-model:folderId/folderPath,
  emits raw errors so each parent maps them in its own style)
- SetupWizard.vue + AddSourceWizard.vue both consume it; ~60 lines of
  duplicated crumb logic removed from AddSourceWizard
- drivePicker.* i18n keys (rootName "My Drive", destinationLabel
  "Backing up to", empty-folder hint)
- tests updated; full ui suite (204) + vue-tsc + eslint + prettier green

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZQh3ZfwtZsM6c5qnTuWZP

Author: pmaxhogan

ui/src/__tests__/settings-components.test.ts

@@ -533,9 +533,9 @@ describe("AddSourceWizard", () => {
       await flushPromises();
     };
 
-    // -> Drive step: root listing loaded, path empty.
+    // -> Drive step: root listing loaded, destination shows My Drive root.
     await clickNext();
-    const driveLabel = i18n.global.t("settings.addSource.step.driveFolder");
+    const driveLabel = i18n.global.t("drivePicker.destinationLabel");
     expect(wrapper.text()).toContain(`${driveLabel}:`);
 
     // Click the "Docs" folder to descend; the rendered path must now be "Docs",

ui/src/__tests__/setup-wizard.test.ts

@@ -378,12 +378,13 @@ describe("SetupWizard walks all five steps (DESIGN s8.5)", () => {
     await flushPromises();
     expect(setup.localPath).toBe("/home/user/Docs");
 
-    const chooseDrive = wrapper
-      .findAll("button")
-      .find((b) => b.text() === i18n.global.t("settings.addSource.chooseDriveButton"));
-    await chooseDrive!.trigger("click");
+    // Drive destination: the shared DriveFolderPicker auto-loads My Drive root on
+    // mount and selects it (no button click needed - that missing feedback was the
+    // bug). The fake backend returns drive-folder-1 as the current folder id.
     await flushPromises();
     expect(setup.driveFolderId).toBe("drive-folder-1");
+    // The picker surfaces the chosen destination instead of a dead button.
+    expect(wrapper.find('[data-testid="drive-folder-picker"]').exists()).toBe(true);
 
     await wrapper.get("footer button:last-child").trigger("click");
     expect(setup.step).toBe("encryption");

ui/src/components/AddSourceWizard.vue

@@ -2,12 +2,13 @@
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
+import DriveFolderPicker from "./DriveFolderPicker.vue";
 import RecoveryPhraseReveal from "./RecoveryPhraseReveal.vue";
 import * as ipc from "../ipc/commands";
 import { toErrorCode } from "../ipc/errors";
 import { useAccountsStore } from "../stores/accounts";
 import { useSourcesStore } from "../stores/sources";
-import type { DriveFolderEntry, ExclusionPreview, SourceDto } from "../ipc/types";
+import type { ExclusionPreview, SourceDto } from "../ipc/types";
 
 // Add-source wizard (SPEC s11.2; DESIGN s8.5 step 3 / s8.2 add-source wizard).
 // Five steps: pick a LOCAL folder (tauri-plugin-dialog, dialog-derived path
@@ -75,15 +76,8 @@ const createdSource = ref<SourceDto | null>(null);
 // calls revealRecoveryPhrase (the backend reveal the ack gate requires).
 const pendingRecoveryAck = ref(false);
 
-// Drive picker state: a breadcrumb stack of the folders descended into, so "up"
-// can re-fetch the parent. The first entry (null id) is the Drive root.
-interface Crumb {
-  id: string | null;
-  path: string;
-}
-const crumbs = ref<Crumb[]>([]);
-const driveFolders = ref<DriveFolderEntry[]>([]);
-const drivePickerLoading = ref(false);
+// Drive destination (id + human path) is owned by the shared DriveFolderPicker
+// via v-model; this component only stages the chosen values for add_source.
 
 const preview = ref<ExclusionPreview | null>(null);
 const previewLoading = ref(false);
@@ -151,8 +145,6 @@ function reset(): void {
   recoveryPhrase.value = [];
   createdSource.value = null;
   pendingRecoveryAck.value = false;
-  crumbs.value = [];
-  driveFolders.value = [];
   preview.value = null;
   errorMessage.value = null;
   revealErrorCode.value = null;
@@ -176,47 +168,9 @@ async function chooseLocalFolder(): Promise<void> {
   }
 }
 
-async function loadDriveFolder(crumb: Crumb): Promise<void> {
-  if (accountId.value === null) return;
-  drivePickerLoading.value = true;
-  errorMessage.value = null;
-  try {
-    const listing = await ipc.pickDriveFolder(accountId.value, crumb.id);
-    driveFolders.value = listing.folders;
-    driveFolderId.value = listing.currentFolderId;
-    // R4-P2-2: the backend cannot derive the full breadcrumb (it lists one
-    // folder's children, not the ancestor chain), so it returns an empty
-    // `currentFolderPath`. The wizard maintains the breadcrumb itself in the
-    // `crumbs` stack (descend appends `parent/name`), so persist THAT path -
-    // using the empty backend value here was what left `drive_folder_path` blank
-    // in SQLite. Fall back to the backend value only if the crumb has no path
-    // (root), keeping "My Drive" root as empty.
-    driveFolderPath.value = crumb.path || listing.currentFolderPath;
-  } catch (e) {
-    errorMessage.value = String(e);
-  } finally {
-    drivePickerLoading.value = false;
-  }
-}
-
-async function openDriveRoot(): Promise<void> {
-  crumbs.value = [{ id: null, path: "" }];
-  await loadDriveFolder(crumbs.value[0]);
-}
-
-async function descendInto(folder: DriveFolderEntry): Promise<void> {
-  const parentPath = driveFolderPath.value;
-  const crumb: Crumb = {
-    id: folder.id,
-    path: parentPath ? `${parentPath}/${folder.name}` : folder.name,
-  };
-  crumbs.value.push(crumb);
-  await loadDriveFolder(crumb);
-}
-
-async function goToCrumb(index: number): Promise<void> {
-  crumbs.value = crumbs.value.slice(0, index + 1);
-  await loadDriveFolder(crumbs.value[index]);
+/** Surface a Drive-picker failure on the wizard's shared error line. */
+function onDrivePickerError(e: unknown): void {
+  errorMessage.value = String(e);
 }
 
 async function loadPreview(): Promise<void> {
@@ -242,10 +196,9 @@ async function loadPreview(): Promise<void> {
 async function next(): Promise<void> {
   if (stepIndex.value >= STEPS.length - 1) return;
   stepIndex.value += 1;
-  // Lazily load each step's data as it becomes active.
-  if (step.value === "driveFolder" && crumbs.value.length === 0) {
-    await openDriveRoot();
-  } else if (step.value === "exclusions") {
+  // Lazily load each step's data as it becomes active. The Drive step
+  // self-loads its root listing when the shared DriveFolderPicker mounts.
+  if (step.value === "exclusions") {
     await loadPreview();
   }
 }
@@ -417,39 +370,14 @@ defineExpose({ start });
         </p>
       </div>
 
-      <!-- Step 2: Drive folder picker -->
+      <!-- Step 2: Drive folder picker (shared with the first-run setup wizard) -->
       <div v-else-if="step === 'driveFolder'" class="space-y-3">
-        <nav class="flex flex-wrap items-center gap-1 text-xs">
-          <button
-            v-for="(crumb, i) in crumbs"
-            :key="i"
-            type="button"
-            class="rounded px-1 py-0.5 text-zinc-600 transition-colors hover:text-teal-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-teal-500 dark:text-zinc-400 dark:hover:text-teal-300"
-            @click="goToCrumb(i)"
-          >
-            {{ i === 0 ? t("settings.addSource.step.driveFolder") : crumb.path.split("/").pop() }}
-          </button>
-        </nav>
-        <p v-if="drivePickerLoading" class="text-sm text-zinc-500">
-          {{ t("common.loading") }}
-        </p>
-        <ul
-          v-else
-          class="max-h-56 divide-y divide-zinc-200 overflow-auto rounded-md border border-zinc-200 dark:divide-zinc-800 dark:border-zinc-700"
-        >
-          <li v-for="folder in driveFolders" :key="folder.id">
-            <button
-              type="button"
-              class="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-teal-500 dark:hover:bg-zinc-800"
-              @click="descendInto(folder)"
-            >
-              {{ folder.name }}
-            </button>
-          </li>
-        </ul>
-        <p class="text-sm text-zinc-600 dark:text-zinc-400">
-          {{ t("settings.addSource.step.driveFolder") }}: {{ driveFolderPath }}
-        </p>
+        <DriveFolderPicker
+          v-model:folder-id="driveFolderId"
+          v-model:folder-path="driveFolderPath"
+          :account-id="accountId"
+          @error="onDrivePickerError"
+        />
       </div>
 
       <!-- Step 3: exclusions preview -->

ui/src/components/DriveFolderPicker.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+import * as ipc from "../ipc/commands";
+import type { DriveFolderEntry } from "../ipc/types";
+
+// Shared Drive destination picker (SPEC s11.2; DESIGN s8.5 step 3). Used by BOTH
+// the first-run setup wizard AND the Settings "Add source" wizard, so the two
+// flows can never drift again. They DID drift: the setup wizard had a degenerate
+// single-shot button that silently targeted My Drive root, showed no confirmation
+// (it bound feedback to the always-empty backend `currentFolderPath`), and gave
+// no way to pick a subfolder - so it looked broken even though it "worked". This
+// breadcrumb browser (previously only in AddSourceWizard) is now the single
+// implementation both flows mount.
+//
+// Behavior: list a Drive folder's child folders, descend by clicking a folder,
+// climb via the breadcrumb. The CURRENTLY-shown folder is the selected
+// destination (published via the folderId + folderPath v-models). The Drive root
+// ("My Drive") is itself a valid destination, so landing on the picker
+// immediately selects it AND shows it - the feedback whose absence made the old
+// button look dead.
+//
+// Breadcrumb path: the backend cannot derive the ancestor chain (it lists one
+// folder's children, not the path TO it) and returns an EMPTY currentFolderPath,
+// so this component maintains the human path itself in `crumbs` (parent/name) and
+// publishes THAT as folderPath - keeping backup_sources.drive_folder_path real.
+//
+// Errors are emitted raw so each parent maps them in its own style: the setup
+// wizard maps to a stable SPEC s24 code (errors.${code}.long); AddSourceWizard
+// shows String(e). i18n: every visible string is a seeded key.
+
+const { t } = useI18n();
+
+const props = defineProps<{ accountId: string | null }>();
+const emit = defineEmits<{ (e: "error", err: unknown): void }>();
+
+const folderId = defineModel<string | null>("folderId", { default: null });
+const folderPath = defineModel<string>("folderPath", { default: "" });
+
+// Breadcrumb stack of the folders descended into; the first entry (null id) is
+// My Drive root. "up" re-fetches an ancestor; descend appends a child.
+interface Crumb {
+  id: string | null;
+  path: string;
+}
+const crumbs = ref<Crumb[]>([]);
+const folders = ref<DriveFolderEntry[]>([]);
+const loading = ref(false);
+
+async function loadFolder(crumb: Crumb): Promise<void> {
+  if (props.accountId === null) return;
+  loading.value = true;
+  try {
+    const listing = await ipc.pickDriveFolder(props.accountId, crumb.id);
+    folders.value = listing.folders;
+    // B1: the current folder is itself the selectable destination (the backend
+    // echoes a concrete id - "root" for My Drive - never null).
+    folderId.value = listing.currentFolderId;
+    // R4-P2-2: persist the client-maintained breadcrumb path (the backend
+    // returns ""). Fall back to the backend value only at the root (empty crumb).
+    folderPath.value = crumb.path || listing.currentFolderPath;
+  } catch (e) {
+    emit("error", e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function openRoot(): Promise<void> {
+  crumbs.value = [{ id: null, path: "" }];
+  await loadFolder(crumbs.value[0]);
+}
+
+async function descendInto(folder: DriveFolderEntry): Promise<void> {
+  const parentPath = folderPath.value;
+  const crumb: Crumb = {
+    id: folder.id,
+    path: parentPath ? `${parentPath}/${folder.name}` : folder.name,
+  };
+  crumbs.value.push(crumb);
+  await loadFolder(crumb);
+}
+
+async function goToCrumb(index: number): Promise<void> {
+  crumbs.value = crumbs.value.slice(0, index + 1);
+  await loadFolder(crumbs.value[index]);
+}
+
+// Load My Drive root as soon as an account is available (and on mount). Landing
+// on the picker selects the root, so the destination is never silently unset and
+// the user always sees where they will back up.
+watch(
+  () => props.accountId,
+  (id) => {
+    if (id) void openRoot();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="space-y-3" data-testid="drive-folder-picker">
+    <nav v-if="accountId" class="flex flex-wrap items-center gap-1 text-xs">
+      <template v-for="(crumb, i) in crumbs" :key="i">
+        <span v-if="i > 0" class="text-zinc-400 dark:text-zinc-600" aria-hidden="true">/</span>
+        <button
+          type="button"
+          class="rounded px-1 py-0.5 text-zinc-600 transition-colors hover:text-teal-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-teal-500 dark:text-zinc-400 dark:hover:text-teal-300"
+          @click="goToCrumb(i)"
+        >
+          {{ i === 0 ? t("drivePicker.rootName") : crumb.path.split("/").pop() }}
+        </button>
+      </template>
+    </nav>
+
+    <p v-if="loading" class="text-sm text-zinc-500">
+      {{ t("common.loading") }}
+    </p>
+    <template v-else-if="accountId">
+      <ul
+        v-if="folders.length > 0"
+        class="max-h-56 divide-y divide-zinc-200 overflow-auto rounded-md border border-zinc-200 dark:divide-zinc-800 dark:border-zinc-700"
+      >
+        <li v-for="folder in folders" :key="folder.id">
+          <button
+            type="button"
+            class="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-teal-500 dark:hover:bg-zinc-800"
+            @click="descendInto(folder)"
+          >
+            {{ folder.name }}
+          </button>
+        </li>
+      </ul>
+      <p
+        v-else
+        class="rounded-md border border-dashed border-zinc-300 px-3 py-2 text-sm text-zinc-500 dark:border-zinc-700"
+      >
+        {{ t("drivePicker.empty") }}
+      </p>
+    </template>
+
+    <p class="text-sm text-zinc-700 dark:text-zinc-200" data-testid="drive-destination">
+      {{ t("drivePicker.destinationLabel") }}: {{ folderPath || t("drivePicker.rootName") }}
+    </p>
+  </div>
+</template>

ui/src/locales/en-US.json

@@ -37,6 +37,11 @@
     "no": "No",
     "none": "None"
   },
+  "drivePicker": {
+    "rootName": "My Drive",
+    "destinationLabel": "Backing up to",
+    "empty": "No subfolders here - this folder is the destination."
+  },
   "wizard": {
     "title": "Set up Driven",
     "stepLabel": "Step {current} of {total}",