Add multi-user auth, background generation, and chat UX improvements

Phase 5: Multi-user authentication with session cookies, bcrypt passwords,
first-user-is-admin pattern, per-user data isolation, backup/restore,
Docker Swarm production stack with secrets and network isolation.

Phase 5.1: Chat UX improvements:
- Background generation architecture (GenerationBuffer + asyncio task)
  with SSE fan-out, reconnect support, and periodic DB flushes
- LLM-generated conversation titles (first exchange + every 10th message)
- Stop generation button with cancel_event and partial content preservation
- Relative timestamps in sidebar (5m ago, 3h ago, then dates)
- Empty chat auto-cleanup on navigation away
- Save-as-note uses LLM for title generation, tags notes with "chat"
- Summarize-as-note also tags with "chat"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/views/SettingsView.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
 import { useSettingsStore } from "@/stores/settings";
+import { useAuthStore } from "@/stores/auth";
+import { useToastStore } from "@/stores/toast";
 import type { ModelInfo } from "@/types/settings";
 
 const store = useSettingsStore();
+const authStore = useAuthStore();
+const toastStore = useToastStore();
 const assistantName = ref("");
 const saving = ref(false);
 const saved = ref(false);
 const pullProgress = ref<{ model: string; percent: number } | null>(null);
 const deleting = ref<string | null>(null);
 const confirmDelete = ref<string | null>(null);
+const exporting = ref(false);
+const restoring = ref(false);
+const restoreFileInput = ref<HTMLInputElement | null>(null);
 
 const MODEL_CATALOG: ModelInfo[] = [
   // — General Purpose —
@@ -244,6 +251,63 @@ async function removeModel(name: string) {
 function cancelDelete() {
   confirmDelete.value = null;
 }
+
+async function exportData(scope: "user" | "full") {
+  exporting.value = true;
+  try {
+    const url = scope === "full" ? "/api/admin/backup" : "/api/admin/backup?scope=user";
+    const res = await fetch(url);
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({ error: `Error ${res.status}` }));
+      throw new Error((body as Record<string, string>).error || `Error ${res.status}`);
+    }
+    const data = await res.json();
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = `fabledassistant-backup-${scope}-${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+    toastStore.show("Backup downloaded");
+  } catch (e) {
+    toastStore.show("Export failed: " + (e as Error).message, "error");
+  } finally {
+    exporting.value = false;
+  }
+}
+
+function triggerRestoreUpload() {
+  restoreFileInput.value?.click();
+}
+
+async function handleRestoreFile(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  restoring.value = true;
+  try {
+    const text = await file.text();
+    const data = JSON.parse(text);
+    const res = await fetch("/api/admin/restore", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({ error: `Error ${res.status}` }));
+      throw new Error((body as Record<string, string>).error || `Error ${res.status}`);
+    }
+    const result = await res.json();
+    toastStore.show(
+      `Restored ${result.stats?.users ?? 0} users, ${result.stats?.notes ?? 0} notes, ${result.stats?.conversations ?? 0} conversations`
+    );
+  } catch (e) {
+    toastStore.show("Restore failed: " + (e as Error).message, "error");
+  } finally {
+    restoring.value = false;
+    // Reset file input
+    if (restoreFileInput.value) restoreFileInput.value.value = "";
+  }
+}
 </script>
 
 <template>
@@ -345,6 +409,45 @@ function cancelDelete() {
         </div>
       </div>
     </section>
+
+    <section class="settings-section">
+      <h2>Data</h2>
+      <p class="section-desc">Export your data or restore from a backup.</p>
+
+      <div class="data-actions">
+        <button
+          class="btn-export"
+          @click="exportData('user')"
+          :disabled="exporting"
+        >
+          {{ exporting ? "Exporting..." : "Export My Data" }}
+        </button>
+
+        <template v-if="authStore.isAdmin">
+          <button
+            class="btn-export"
+            @click="exportData('full')"
+            :disabled="exporting"
+          >
+            {{ exporting ? "Exporting..." : "Export Full Backup" }}
+          </button>
+          <button
+            class="btn-restore"
+            @click="triggerRestoreUpload"
+            :disabled="restoring"
+          >
+            {{ restoring ? "Restoring..." : "Restore from Backup" }}
+          </button>
+          <input
+            ref="restoreFileInput"
+            type="file"
+            accept=".json"
+            class="hidden-file-input"
+            @change="handleRestoreFile"
+          />
+        </template>
+      </div>
+    </section>
   </main>
 </template>
 
@@ -598,4 +701,48 @@ function cancelDelete() {
   color: var(--color-text);
   border-color: var(--color-text-muted);
 }
+
+/* Data section */
+.data-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.btn-export {
+  padding: 0.45rem 1rem;
+  background: var(--color-bg-secondary);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.btn-export:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.btn-export:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btn-restore {
+  padding: 0.45rem 1rem;
+  background: var(--color-bg-secondary);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.btn-restore:hover:not(:disabled) {
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+.btn-restore:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.hidden-file-input {
+  display: none;
+}
 </style>