feat(web): surface connect/disconnect backup path in wizard and Connect modal

First slice of specs/078-connect-trust-preview (backup visibility, spec
US2 / FR-005+FR-006): the backend has always written a timestamped backup
before modifying a client config and returned it as ConnectResult.backup_path
(internal/connect/backup.go, connect.go), and the CLI prints it — but the
Web UI dropped it. Now:

- ConnectModal.vue: after a successful connect OR disconnect, the result
  area shows "A backup of your previous config was saved to <path>" with a
  one-click "Copy path" button (same navigator.clipboard pattern as the
  existing copy-tccutil affordance). A success with no backup_path renders
  the explicit "No prior config file existed, so no backup was needed."
  message instead of a blank path (FR-006 no-prior-file case, e.g. bridge
  clients whose config is created by connect).
- OnboardingWizard.vue: ClientRow now renders the same backup line (path +
  Copy path, or the no-prior-file message) inside the client's row after a
  connect performed in the wizard session.

TDD: added 3 failing ConnectModal cases (backup path + copy, no-prior-file,
disconnect backup) to tests/unit/connect-modal.spec.ts and a new
tests/unit/onboarding-wizard-backup-path.spec.ts (2 cases) before
implementing; full frontend suite passes (32 files, 235 tests). Built via
make build so the Go binary embeds the updated web/frontend/dist.

Assumptions (zero-interruption policy):
- The TS contract already carries backup_path?: string on ConnectResult
  (frontend/src/types/api.ts) — no contract change needed.
- An empty-string backup_path on success is treated the same as absent
  (backend omits it when no prior file existed; never render a blank path).
- Preview/undo/TCC copy (spec US1/US3/US4) intentionally NOT built here.
- No tasks.md exists under specs/078-connect-trust-preview/ — nothing to
  check off; spec.md left untouched.
- npm-ci metadata churn in frontend/package-lock.json was reverted, not
  committed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Dumbris

frontend/src/components/ConnectModal.vue

@@ -129,6 +129,34 @@
         <div class="alert alert-sm" :class="resultSuccess ? 'alert-success' : 'alert-error'">
           <span class="text-sm">{{ resultMessage }}</span>
         </div>
+        <!-- Spec 078 US2 / FR-006: surface the timestamped backup after a
+             successful connect/disconnect; the "no prior file" case is stated
+             explicitly rather than showing a blank path. -->
+        <div
+          v-if="resultSuccess && resultBackupPath"
+          data-test="connect-backup-path"
+          class="mt-2 flex items-start justify-between gap-2 rounded-lg bg-base-200 px-3 py-2"
+        >
+          <span class="text-xs leading-relaxed min-w-0">
+            A backup of your previous config was saved to
+            <code class="font-mono text-[11px] break-all" :title="resultBackupPath">{{ resultBackupPath }}</code>
+          </span>
+          <button
+            data-test="connect-copy-backup"
+            @click="copyBackupPath"
+            class="btn btn-ghost btn-xs shrink-0"
+            title="Copy the backup path to the clipboard"
+          >
+            {{ copiedBackup ? 'Copied ✓' : 'Copy path' }}
+          </button>
+        </div>
+        <div
+          v-else-if="resultSuccess && resultBackupPath === null"
+          data-test="connect-no-backup"
+          class="mt-2 rounded-lg bg-base-200 px-3 py-2 text-xs opacity-70"
+        >
+          No prior config file existed, so no backup was needed.
+        </div>
       </div>
 
       <div class="modal-action">
@@ -170,6 +198,11 @@ const clients = ref<ClientStatus[]>([])
 const error = ref<string | null>(null)
 const resultMessage = ref('')
 const resultSuccess = ref(false)
+// Spec 078 US2: backup path of the last successful connect/disconnect.
+// string = timestamped backup created; null = success but no prior file to
+// back up; undefined = no successful operation to report on.
+const resultBackupPath = ref<string | null | undefined>(undefined)
+const copiedBackup = ref(false)
 const loading = reactive({
   initial: false,
   clients: {} as Record<string, boolean>,
@@ -259,12 +292,16 @@ async function fetchClients() {
 async function connect(clientId: string) {
   loading.clients[clientId] = true
   resultMessage.value = ''
+  resultBackupPath.value = undefined
+  copiedBackup.value = false
 
   try {
     const response = await api.connectClient(clientId)
     if (response.success && response.data) {
       resultMessage.value = response.data.message || `Connected to ${clientId}`
       resultSuccess.value = true
+      // Empty/absent backup_path on success means no prior file existed.
+      resultBackupPath.value = response.data.backup_path || null
       await fetchClients()
       systemStore.addToast({
         type: 'success',
@@ -290,13 +327,16 @@ async function connect(clientId: string) {
 async function disconnect(clientId: string) {
   loading.clients[clientId] = true
   resultMessage.value = ''
+  resultBackupPath.value = undefined
+  copiedBackup.value = false
 
   try {
     const client = clients.value.find(c => c.id === clientId)
     const response = await api.disconnectClient(clientId, client?.server_name || 'mcpproxy')
     if (response.success && response.data) {
       resultMessage.value = response.data.message || `Disconnected from ${clientId}`
       resultSuccess.value = true
+      resultBackupPath.value = response.data.backup_path || null
       await fetchClients()
       systemStore.addToast({
         type: 'info',
@@ -373,6 +413,22 @@ async function copyTccutil(client: ClientStatus) {
   }
 }
 
+// Spec 078 US2: one-click copy of the backup path (same clipboard pattern as
+// copyTccutil above).
+async function copyBackupPath() {
+  if (!resultBackupPath.value) return
+  try {
+    await navigator.clipboard.writeText(resultBackupPath.value)
+    copiedBackup.value = true
+    setTimeout(() => {
+      copiedBackup.value = false
+    }, 2000)
+  } catch {
+    // Clipboard unavailable (e.g. insecure context): the full path is already
+    // rendered, so the user can select and copy it manually.
+  }
+}
+
 async function connectAll() {
   for (const client of connectableClients.value) {
     await connect(client.id)
@@ -381,6 +437,8 @@ async function connectAll() {
 
 function close() {
   resultMessage.value = ''
+  resultBackupPath.value = undefined
+  copiedBackup.value = false
   emit('close')
 }
 
@@ -392,6 +450,8 @@ watch(() => props.show, (newVal) => {
     fetchClients()
     void onboarding.fetchState()
     resultMessage.value = ''
+    resultBackupPath.value = undefined
+    copiedBackup.value = false
   }
 })
 </script>

frontend/src/components/OnboardingWizard.vue

@@ -68,6 +68,9 @@
                 :key="c.id"
                 :client="c"
                 :busy="busyClients[c.id]"
+                :backup-path="connectBackups[c.id]"
+                :copied-backup="copiedBackupClient === c.id"
+                @copy-backup="copyBackupPath"
                 @connect="connectOne"
               />
             </div>
@@ -80,6 +83,9 @@
                 :key="c.id"
                 :client="c"
                 :busy="busyClients[c.id]"
+                :backup-path="connectBackups[c.id]"
+                :copied-backup="copiedBackupClient === c.id"
+                @copy-backup="copyBackupPath"
                 @connect="connectOne"
               />
             </div>
@@ -96,6 +102,9 @@
                   :key="c.id"
                   :client="c"
                   :busy="busyClients[c.id]"
+                  :backup-path="connectBackups[c.id]"
+                  :copied-backup="copiedBackupClient === c.id"
+                  @copy-backup="copyBackupPath"
                   @connect="connectOne"
                 />
               </div>
@@ -518,6 +527,11 @@ const clientsError = ref<string | null>(null)
 const busyClients = reactive<Record<string, boolean>>({})
 const connectMessage = ref('')
 const connectMessageOk = ref(true)
+// Spec 078 US2 / FR-006: backup path per client for connects performed in this
+// wizard session. string = timestamped backup created; null = success but no
+// prior file existed (nothing to back up); absent = no connect happened yet.
+const connectBackups = reactive<Record<string, string | null>>({})
+const copiedBackupClient = ref<string | null>(null)
 const addServerOpen = ref(false)
 const serverAddedJustNow = ref(false)
 
@@ -1028,6 +1042,9 @@ async function connectOne(clientId: string) {
     if (res.success && res.data) {
       connectMessageOk.value = true
       connectMessage.value = res.data.message || `Connected ${clientId}`
+      // Spec 078 US2: keep the backup path so the row can surface it; an
+      // empty/absent backup_path on success means no prior file existed.
+      connectBackups[clientId] = res.data.backup_path || null
       await fetchClients()
       // Spec 046 — record connect-step completion for telemetry funnel.
       // Only the first successful connect transitions the status; subsequent
@@ -1053,6 +1070,22 @@ async function connectOne(clientId: string) {
   }
 }
 
+// Spec 078 US2: one-click copy of a row's backup path (same clipboard pattern
+// as ConnectModal's copy affordances).
+async function copyBackupPath(clientId: string) {
+  const path = connectBackups[clientId]
+  if (!path) return
+  try {
+    await navigator.clipboard.writeText(path)
+    copiedBackupClient.value = clientId
+    setTimeout(() => {
+      if (copiedBackupClient.value === clientId) copiedBackupClient.value = null
+    }, 2000)
+  } catch {
+    // Clipboard unavailable: the full path is already rendered in the row.
+  }
+}
+
 function openAddServer() {
   addServerOpen.value = true
 }
@@ -1111,14 +1144,14 @@ onMounted(() => {
 // --- ClientRow component ------------------------------------------------
 // Inlined as a functional component to keep this file self-contained while
 // the row layout stays consistent across all three lists.
-const ClientRow: FunctionalComponent<{ client: ClientStatus; busy?: boolean }, { connect: (id: string) => void }> = (props, { emit: rowEmit }) => {
+const ClientRow: FunctionalComponent<
+  { client: ClientStatus; busy?: boolean; backupPath?: string | null; copiedBackup?: boolean },
+  { connect: (id: string) => void; 'copy-backup': (id: string) => void }
+> = (props, { emit: rowEmit }) => {
   const c = props.client
-  return h(
+  const row = h(
     'div',
-    {
-      class: 'flex items-center justify-between p-2 rounded-lg border border-base-300',
-      'data-test': `client-row-${c.id}`,
-    },
+    { class: 'flex items-center justify-between' },
     [
       h('div', { class: 'min-w-0 flex-1' }, [
         h('div', { class: 'font-medium text-sm truncate' }, c.name),
@@ -1146,7 +1179,51 @@ const ClientRow: FunctionalComponent<{ client: ClientStatus; busy?: boolean }, {
       ]),
     ]
   )
+  // Spec 078 US2 / FR-006: after a connect performed in this wizard session,
+  // surface the timestamped backup (or the honest "no prior file" case) right
+  // in the row. undefined = no connect happened for this client yet.
+  const backupLine =
+    props.backupPath !== undefined
+      ? h(
+          'div',
+          {
+            class: 'mt-1 flex items-start justify-between gap-2 text-[11px] opacity-70',
+            'data-test': `client-backup-${c.id}`,
+          },
+          props.backupPath
+            ? [
+                h('span', { class: 'min-w-0 break-all leading-relaxed' }, [
+                  'A backup of your previous config was saved to ',
+                  h('code', { class: 'font-mono', title: props.backupPath }, props.backupPath),
+                ]),
+                h(
+                  'button',
+                  {
+                    class: 'btn btn-ghost btn-xs shrink-0',
+                    'data-test': `client-copy-backup-${c.id}`,
+                    title: 'Copy the backup path to the clipboard',
+                    onClick: () => rowEmit('copy-backup', c.id),
+                  },
+                  props.copiedBackup ? 'Copied ✓' : 'Copy path'
+                ),
+              ]
+            : 'No prior config file existed, so no backup was needed.'
+        )
+      : null
+  return h(
+    'div',
+    {
+      class: 'p-2 rounded-lg border border-base-300',
+      'data-test': `client-row-${c.id}`,
+    },
+    backupLine ? [row, backupLine] : [row]
+  )
+}
+ClientRow.props = {
+  client: { type: Object, required: true },
+  busy: { type: Boolean, default: false },
+  backupPath: { type: String, default: undefined },
+  copiedBackup: { type: Boolean, default: false },
 }
-ClientRow.props = { client: { type: Object, required: true }, busy: { type: Boolean, default: false } }
-ClientRow.emits = ['connect']
+ClientRow.emits = ['connect', 'copy-backup']
 </script>