docs: define milestone v0.2 requirements (36 reqs, 6 categories)
UI overhaul, codebase quality, admin panel rearchitecture, UX improvements, responsive layout, and performance/stack updates. Research: STACK.md, FEATURES.md, ARCHITECTURE.md, PITFALLS.md. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
fd05563ec6
commit
f7758776ec
+436
-632
File diff suppressed because it is too large
Load Diff
+192
-384
@@ -1,449 +1,257 @@
|
||||
# Feature Research
|
||||
# Feature Landscape — v0.2 UI Overhaul
|
||||
|
||||
**Domain:** SaaS Document Management Platform (multi-user, quota-enforced, privacy-first)
|
||||
**Researched:** 2026-05-21
|
||||
**Confidence:** MEDIUM (web fetch/search unavailable; based on training knowledge of Google Drive, OneDrive, Dropbox, Box, Notion, Paperless-ngx, DocuWare through Aug 2025 — all mature platforms with stable, well-documented feature sets)
|
||||
**Domain:** Self-hosted SaaS document management (DocuVault)
|
||||
**Researched:** 2026-06-07
|
||||
**Scope:** UX patterns and UI feature decisions for v0.2. Existing functional features (upload, extraction, sharing, cloud backends, auth) are not re-researched — only their UX surface.
|
||||
|
||||
---
|
||||
|
||||
## Research Scope
|
||||
## Table Stakes
|
||||
|
||||
Platforms surveyed: Google Drive, Microsoft OneDrive, Dropbox, Notion, Box, Paperless-ngx (self-hosted), DocuWare (enterprise DMS).
|
||||
Features users expect. Missing = product feels incomplete or broken.
|
||||
|
||||
Eight areas analyzed per the brief:
|
||||
1. Auth & access control
|
||||
2. Storage & quota UX
|
||||
3. Folder/organization UX
|
||||
4. Sharing model
|
||||
5. Cloud storage integration UX
|
||||
6. Admin panel
|
||||
7. Audit / compliance
|
||||
8. Document viewer features
|
||||
| Feature | Why Expected | Complexity | Depends On |
|
||||
|---------|--------------|------------|------------|
|
||||
| Standalone admin layout (`/admin/*` routes with own sidebar) | AdminView.vue is currently a tab sheet bolted to the user layout. Admin and user contexts share no chrome. Nextcloud, Mayan EDMS, and every self-hosted SaaS treat admin as a distinct area. | Medium | Router nested routes, new `AdminLayout.vue` |
|
||||
| Admin sidebar with discrete nav items (Users, Quotas, AI Config, Audit Log) | Each admin tab is already a full standalone component. Route-based nav replaces in-view tabs — enables deep linking, browser back button, and future per-section permissions. | Low | Vue Router `/admin/users`, `/admin/quotas`, `/admin/ai`, `/admin/audit` child routes |
|
||||
| Empty states for every zero-content context | File list empty, folder empty, search no-results, shared-with-me empty, topics empty — each needs a distinct, actionable state. Current implementation is plain gray text. Zero-content states are the first thing new users see. | Medium | `StorageBrowser.vue`, `SharedView.vue`, `TopicsView.vue` |
|
||||
| Loading skeletons for document list and sidebar tree | The document list (`StorageBrowser`) and sidebar folder tree currently render a plain "Loading…" text string. Skeletons reduce perceived load time by 30–50% on equivalent wait times per usability studies. The `QuotaBar` already uses `animate-pulse` — extend that pattern. | Medium | `StorageBrowser.vue`, `AppSidebar.vue`, new `SkeletonRow.vue` |
|
||||
| Global search focus shortcut (`/` key) | Table stakes for document management tools. Paperless-ngx, Notion, GitHub, Linear all use `/` to focus search. Users who type `/` and nothing happens feel the app is unpolished. | Low | `SearchBar.vue`, `FileManagerView.vue` global `keydown` listener |
|
||||
| Escape key closes modals and clears search | Universal browser convention. Escape should: close `ShareModal`, close `FolderDeleteModal`, close `DocumentPreviewModal`, clear the inline folder rename input, and clear search field. Several of these already handle `keydown.escape` in inputs but not at the modal overlay level. | Low | `ShareModal.vue`, `FolderDeleteModal.vue`, `DocumentPreviewModal.vue` |
|
||||
| Sidebar collapses on mobile (hamburger toggle, overlay drawer) | On viewports below 1024px the fixed 256px sidebar eats 25–40% of the viewport. The current layout has no mobile handling — sidebar overlaps content on small screens. Minimum viable mobile: hamburger button + slide-in overlay drawer. | Medium | `AppSidebar.vue`, `App.vue`, new mobile toggle state |
|
||||
| Responsive document list column hiding | `StorageBrowser` grid already uses `hidden md:block` for Size and `hidden sm:block` for Modified. This is correct — verify it works and document the pattern as intentional. Ensure the icon + name + actions columns always render. | Low | `StorageBrowser.vue` (verify existing classes) |
|
||||
| Upload trigger keyboard shortcut (`U` key when no input is focused) | Secondary table stakes. Windows Explorer, Nextcloud, and Dropbox support pressing a key to trigger upload when focus is on the file list. Makes keyboard-first workflows viable. | Low | `DropZone.vue` or `FileManagerView.vue` global `keydown` listener |
|
||||
| Visible drag-and-drop affordance on the drop zone at all times | `DropZone.vue` already exists and handles dragover/drop. The gap: the drop zone is a full-width dashed box inside the content area, which is correct, but there is no whole-page drag overlay when a user drags a file from the OS file manager. Users miss the target and the drop is ignored. | Medium | `FileManagerView.vue` document-level dragenter/dragleave listener |
|
||||
| Contextual breadcrumb with admin section label | Admin subroutes need breadcrumbs: `Admin > Users`, `Admin > Audit Log`. Without them, admin pages feel unmoored. The user-facing `FolderBreadcrumb` is already built — admin can use the same component with static segments. | Low | `FolderBreadcrumb.vue`, `AdminLayout.vue` |
|
||||
|
||||
---
|
||||
|
||||
## Feature Landscape
|
||||
## Differentiators
|
||||
|
||||
### Table Stakes (Users Expect These)
|
||||
Features that add genuine value beyond the baseline. Not expected by most users, but valued when present.
|
||||
|
||||
Features users assume exist. Missing these = product feels incomplete or broken.
|
||||
|
||||
#### 1. Auth & Access Control
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| Email + password registration with validation | Every SaaS has this | LOW | Strength rules (length, complexity) expected; breach-check (HaveIBeenPwned API) is a notable addition |
|
||||
| Persistent sessions with "remember me" | Users hate logging in every visit | LOW | JWT with refresh token; sliding expiry. Pure stateless JWT without refresh feels cheap. |
|
||||
| Password reset via email | Users forget passwords constantly | LOW | Time-limited signed token; mandatory |
|
||||
| TOTP 2FA (authenticator app) | Expected at any security-conscious SaaS | MEDIUM | PyOTP / HOTP RFC 6238. Users expect QR code setup + backup codes. Missing backup codes = major UX gap. |
|
||||
| Forced logout / session revocation | Power users and security-conscious users expect this | MEDIUM | "Sign out all devices" is table stakes at Box and Google. Requires server-side session tracking (defeats pure JWT — use a token revocation list or short-lived JWTs + refresh token table). |
|
||||
| Per-user isolated data space | Every cloud storage product does this | LOW | Violated = catastrophic trust failure. MinIO prefix isolation per user ID. |
|
||||
| Account deletion with data wipe | GDPR + user trust | MEDIUM | Must cascade: documents, quotas, shares, cloud credentials, audit entries scoped to user. |
|
||||
|
||||
#### 2. Storage & Quota UX
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| Visible quota indicator (used / total) | Google Drive, Dropbox, OneDrive all show this prominently | LOW | Progress bar + "X MB of Y MB used" in sidebar or settings. Missing = users feel blind. |
|
||||
| Quota check at upload time with clear error | Every platform rejects over-quota uploads | LOW | Error must say "You've used X of Y MB — free up space or upgrade." Not a generic 500. |
|
||||
| Per-file size shown in file list | Dropbox, Drive show sizes in list view | LOW | Users make quota decisions based on file size visibility. |
|
||||
| Sort/filter by size | Users cleaning up quota expect to find large files | LOW | "Largest files first" sort is a common quota-management action. |
|
||||
| Quota warning at 80% and 95% | Drive warns at 80%; Dropbox emails at 90% | LOW | In-app banner + optionally email. Users are surprised when they hit the wall without warning. |
|
||||
| Storage usage breakdown by folder/category | Drive shows breakdown by file type | MEDIUM | "X MB in Documents, Y MB in Images" helps users understand what to delete. Folder-level usage is lower priority but expected by power users. |
|
||||
| Delete confirmation that shows freed space | Minor but Dropbox/Drive do this | LOW | "Deleting this file will free 24 MB." Reinforces value of the action. |
|
||||
|
||||
#### 3. Folder / Organization UX
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| Create folder | Universal | LOW | Standard. |
|
||||
| Rename folder | Universal | LOW | Inline rename (click-to-edit) is expected; modal is acceptable. |
|
||||
| Delete folder (with contents confirmation) | Universal | LOW | Must warn if non-empty: "This will delete N documents." Soft-delete preferred; hard-delete on confirm. |
|
||||
| Move document to folder (drag-and-drop or context menu) | Drive, Dropbox have both | MEDIUM | Drag-and-drop is a strong UX expectation in desktop-class web apps. Context menu "Move to..." is the fallback minimum. |
|
||||
| Move folder into another folder (nesting) | Drive, OneDrive support arbitrary depth | MEDIUM | Users expect arbitrary depth. Cap at 5–8 levels deep to avoid pathological nesting; unlimited is fine for v1. |
|
||||
| Breadcrumb navigation | Universal in file managers | LOW | Clickable breadcrumb showing full path: Root > Invoices > 2025. Without this users get lost in nested folders. |
|
||||
| Sort documents within folder (name, date, size, type) | All platforms have this | LOW | Default: date descending (newest first). |
|
||||
| "Recent" / "Last accessed" virtual folder | Drive, OneDrive surface this prominently | LOW | Not a real folder — a filtered view. Users navigating back to recent work expect it. |
|
||||
| Search across all documents | Every platform has global search | MEDIUM | Full-text or metadata search. For DocuVault, text is already extracted — expose it in search. Missing = product feels like a filing cabinet with no index. |
|
||||
| Multi-select for batch operations | Drive, Dropbox support shift-click + checkbox | MEDIUM | Batch delete, batch move. Without this, managing many files is tedious. |
|
||||
| "Shared with me" virtual folder | Drive has this; Box has it; Dropbox has it | LOW | Auto-populated when another user shares a document. Already in PROJECT.md. |
|
||||
|
||||
#### 4. Sharing Model
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| Share with named user (by handle or email) | Drive, Box, Dropbox all do this | MEDIUM | Core sharing primitive. Must show: who has access, their permission level, revoke button. |
|
||||
| View-only vs. edit permission distinction | Box, Drive, Dropbox all distinguish view/edit | LOW | For DocuVault, edit means "re-upload / annotate" — since no in-app editing, view-only is the primary mode. Still must distinguish the concept for future extensibility. |
|
||||
| Revoke share immediately | All platforms do this | LOW | No delay. If the user is currently viewing the document, their next request should 403. |
|
||||
| Share notification to recipient | Drive/Dropbox send email; Box shows in-app | LOW | At minimum: in-app notification. Email is table stakes for platforms where users may not be logged in. |
|
||||
| See list of "what I've shared" | Drive, Box surface this | LOW | Users need to audit their own shares. A "Shared by me" list per document + a global shares list in settings. |
|
||||
| Accept / decline incoming share | Box requires acceptance; Drive shows silently | MEDIUM | DocuVault's "Shared with me" folder appearing is implicit acceptance. An explicit accept/decline adds trust. Drive skips it; Box requires it for external shares. Given privacy-first positioning, explicit accept is the better default. |
|
||||
| Share expiry date | Box supports this; Drive (with Workspace) does; Dropbox Business does | MEDIUM | Not universal at consumer tier but expected in security-conscious / business contexts. |
|
||||
|
||||
#### 5. Cloud Storage Integration UX
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| OAuth2 connect flow for Google Drive / OneDrive | Standard for these integrations | HIGH | Redirect-based OAuth2 PKCE. Users expect "Connect" → browser popup → granted → back to app. No credential entry. |
|
||||
| Connection status indicator (connected / disconnected / error) | Any integration page shows this | LOW | Green dot = connected, red = error with message. Dropbox Business sync indicators are the model. |
|
||||
| Disconnect / re-authenticate option | Users rotate tokens; credentials expire | LOW | "Disconnect" button. Re-auth if token expires (silent token refresh where possible). |
|
||||
| Default storage selector | Users need to know where new uploads go | LOW | Clear radio/dropdown: "Local storage" vs "Google Drive" vs "OneDrive." Show current default prominently. |
|
||||
| Upload routing confirmation | When cloud is default, users want to see it confirmed | LOW | "Stored in Google Drive" in upload success message. |
|
||||
| Error state when cloud storage unreachable | Cloud services go down; credentials expire | MEDIUM | Graceful: queue locally, show warning, retry. Hard fail (lose document) = catastrophic. Minimum: "Storage unavailable — document saved locally." |
|
||||
| Basic usage from cloud backend | Show how much cloud storage is used vs available | MEDIUM | Google Drive has 15 GB free; OneDrive 5 GB. Surfacing "You've used 3 GB of your 15 GB Google Drive" alongside local quota gives users a full picture. |
|
||||
|
||||
#### 6. Admin Panel
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| User list with search and pagination | Every admin panel has this | LOW | Show: username, email, registration date, last login, quota used/total, active/inactive status. |
|
||||
| Create user account | Admin needs to onboard users manually (invite flow) | LOW | Form: email, temp password (force reset on first login), quota assignment. |
|
||||
| Deactivate / reactivate user | Admin must be able to remove access without deleting data | LOW | Soft disable: user cannot log in; data preserved. Separate from delete. |
|
||||
| Force password reset | Standard admin action | LOW | Invalidates current sessions; user gets reset email. |
|
||||
| Quota adjustment per user | Already in PROJECT.md | LOW | Input: new quota in MB. Show current usage. Prevent setting quota below current usage (warn, not block). |
|
||||
| System-wide default quota setting | Admins want to change the free tier baseline | LOW | Global default that new users inherit. Existing users keep their individually-set quota. |
|
||||
| AI provider/model assignment per user | Already in PROJECT.md | MEDIUM | Dropdown of configured providers + models. Show "using system default" until overridden. |
|
||||
| System-wide AI provider default | Already in PROJECT.md | LOW | Global fallback when no user override exists. |
|
||||
| Audit log viewer | All enterprise DMS products have this | MEDIUM | See Audit section below. |
|
||||
| Platform health indicators | Admins need to know if things are broken | MEDIUM | Storage backend connectivity, database connection, queue depth. A simple status page at /admin/health. |
|
||||
|
||||
#### 7. Audit / Compliance
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| Audit log of security events | GDPR, SOC2 baseline, enterprise buyers expect this | MEDIUM | Mandatory events: login, failed login, password reset, 2FA enable/disable, session revoke. |
|
||||
| Audit log of data events | Same compliance baseline | MEDIUM | Mandatory events: document upload, document delete, document move/rename, share create, share revoke, quota change. |
|
||||
| Metadata-only audit (no content) | Privacy requirement — DocuVault's stated constraint | LOW | Log: actor_user_id, action, target_resource_id, timestamp, IP address. Never log document content or filenames in the log (filename is sensitive metadata). |
|
||||
| Admin-viewable audit log with filters | Already in PROJECT.md | MEDIUM | Filter by: user, action type, date range. Export to CSV is expected by compliance-oriented admins. |
|
||||
| Immutable audit log | Audit logs lose their value if they can be edited | MEDIUM | Append-only table. No UPDATE/DELETE on audit rows. Admin UI shows only read operations. |
|
||||
| IP address logging | Standard for login events; expected by security teams | LOW | Log IP on all auth events. GDPR note: IP is PII — include in retention policy. |
|
||||
| Log retention policy | GDPR requires defined retention | LOW | Configurable in admin settings. Default: 1 year. Automated purge of older entries. |
|
||||
| GDPR data export (user's own data) | GDPR Article 20 right to portability | HIGH | User can request export of all their data: document list + metadata (not necessarily content), account info, audit log of their own actions. Full content export is optional but the metadata export is required. |
|
||||
|
||||
#### 8. Document Viewer Features
|
||||
|
||||
| Feature | Why Expected | Complexity | Notes |
|
||||
|---------|--------------|------------|-------|
|
||||
| In-browser PDF preview | Drive, Dropbox, Box all have this | MEDIUM | Use browser's native PDF viewer or PDF.js. Without preview, users must download to read — major friction. |
|
||||
| Document metadata panel | All DMS platforms show this | LOW | Show: upload date, file size, MIME type, AI-assigned topics, uploader, storage backend. |
|
||||
| AI topics display | Core DocuVault feature | LOW | Show assigned topics with confidence if available. Allow manual topic override from document detail. |
|
||||
| Download original file | Universal | LOW | Always available. Even if preview fails, download must work. |
|
||||
| Document rename | Drive, Dropbox allow rename from detail view | LOW | Inline rename in detail view or list view. |
|
||||
| Delete from detail view | Universal | LOW | With confirmation. Returns to parent folder. |
|
||||
| "Shared with" indicator on document | Drive shows a "people" icon on shared items | LOW | Visual indicator in list view that document is shared. Click to see who. |
|
||||
| Basic image preview (JPG, PNG) | All platforms preview images natively | LOW | Browser <img> tag is sufficient. |
|
||||
| Text file preview | Drive, Dropbox show .txt inline | LOW | Simple <pre> render of extracted text is adequate. |
|
||||
| Feature | Value Proposition | Complexity | Depends On |
|
||||
|---------|-------------------|------------|------------|
|
||||
| Whole-page drop zone (drag files anywhere on the screen to upload) | Removes the requirement to aim at the DropZone rectangle. Paperless-ngx supports this. Implementation: listen for `dragenter` at the document level, show a full-screen overlay with the drop target, then pipe the `drop` event into the existing upload emit chain. | Medium | `FileManagerView.vue`, new `PageDropOverlay.vue`, existing `DropZone` emit chain |
|
||||
| Skeleton placeholders shaped like the real content (5-column grid rows) | The QuotaBar has a simple pulse bar. The document list skeleton should be 5-column grid rows matching the actual layout — icon placeholder, name placeholder, size placeholder, date placeholder. This makes the transition from loading to content feel instantaneous rather than a layout jump. | Medium | New `SkeletonRow.vue`, `StorageBrowser.vue` |
|
||||
| Admin dashboard overview page (`/admin` root — stats at a glance) | User count, storage total across all users, recent audit log entries. Gives admins a reason to visit the admin panel rather than jumping straight to sub-sections. Self-hosted tools consistently provide this at the admin root. | Medium | New `AdminOverviewView.vue`, read-only aggregate API endpoints (may require backend work) |
|
||||
| Inline toast/notification system for upload completion and errors | Currently errors appear in the UploadProgress inline list and are never dismissed. A toast system enables transient success/error messages for any action (rename, delete, share) — not just upload. Constraint: keep it simple, not a full notification center. | Medium | New `ToastManager.vue` in `App.vue`, composable `useToast()` |
|
||||
| Document count badge polish on topic sidebar links | Already has `{{ topic.doc_count }}` in the sidebar. What's missing: show 0 counts as dimmed rather than hidden (users want to know the topic exists even if empty), and truncate to "9+" at double digits. | Low | `AppSidebar.vue` (minor change) |
|
||||
| Upload from keyboard shortcut `U` with accessible file picker trigger | The keyboard shortcut fires `triggerInput()` on DropZone. Accessibility requirement: this is equivalent to clicking the hidden file input — screen readers announce the file dialog opening. Already partially supported by `DropZone.vue`'s `triggerInput()` — wire up the global shortcut. | Low | `DropZone.vue`, `FileManagerView.vue` |
|
||||
| Tablet landscape layout: sidebar + content, no collapse needed | At 1024px (lg breakpoint), the sidebar is fully visible alongside content. This is the natural Tailwind `lg:flex` pattern. Verify it and make the breakpoint logic explicit in the layout wrapper. | Low | `App.vue` layout wrapper |
|
||||
|
||||
---
|
||||
|
||||
### Differentiators (Competitive Advantage)
|
||||
## Anti-Features
|
||||
|
||||
Features that align with DocuVault's core value (privacy-first, self-hosted, AI-classified).
|
||||
Features to explicitly NOT build in v0.2.
|
||||
|
||||
| Feature | Value Proposition | Complexity | Notes |
|
||||
|---------|-------------------|------------|-------|
|
||||
| Privacy-first admin model (admin cannot read documents) | Unique trust proposition vs Google Drive/OneDrive where the operator can read everything | HIGH | Encryption-at-rest with user-scoped keys; admin queries explicitly exclude content. No other mainstream cloud platform offers this by default. Strong differentiator for privacy-conscious users. |
|
||||
| Bring-your-own cloud storage backend | Users keep their existing cloud storage; DocuVault is the intelligent layer on top | HIGH | Google Drive/OneDrive are the storage, DocuVault is the classifier/organizer. Removes the "I have to trust another cloud with my docs" objection. |
|
||||
| AI topic classification on upload (automatic) | No other mainstream DMS auto-classifies by topic on upload | MEDIUM | Paperless-ngx has auto-tagging; DocuWare has rules-based classification. AI-driven flexible topics is differentiated for non-enterprise users. |
|
||||
| Multiple AI provider support (local/private inference) | Users who want fully on-premises AI (Ollama) get privacy guarantee no cloud DMS offers | MEDIUM | Ollama / LMStudio means documents never leave the user's infrastructure. Strong appeal to privacy-first and regulated-industry users. |
|
||||
| Per-user topic customization on top of system defaults | Users get personalized classification without admin overhead | MEDIUM | System topics + per-user overrides. No mainstream cloud DMS supports per-user AI taxonomy customization. |
|
||||
| Share expiry with automatic revocation | Goes beyond basic sharing; prevents forgotten shares | MEDIUM | Dropbox Business and Box have this at paid tiers. Including it at v1 is differentiating for a free-tier self-hosted platform. |
|
||||
| Explicit share accept/decline | Recipient has control; aligns with privacy-first positioning | LOW | Box has this; Drive doesn't require it. Gives recipients agency. |
|
||||
| Storage backend per-document routing | Some documents go to Drive, others to local — user decides per-upload | HIGH | No mainstream platform does this. Users with mixed sensitivity needs can route sensitive docs to local and bulk docs to Drive. Complex to implement but uniquely valuable. |
|
||||
| In-app audit log visible to the user (not just admin) | Users can see their own activity history | LOW | GDPR-aligned; builds trust. Google Activity Dashboard is the model. Most self-hosted DMS don't surface this to users. |
|
||||
| Anti-Feature | Why Avoid | What to Do Instead |
|
||||
|--------------|-----------|-------------------|
|
||||
| Folder reorder by drag-and-drop (drag folder A above folder B to change sidebar order) | Requires a persistent `position` column in the DB, a backend migration, and drag state tracking across the sidebar tree. The sidebar is already collapsible. Payoff is marginal. | Keep alphabetical or creation-time ordering. Users can rename folders to impose their own order (e.g., "1. Contracts"). |
|
||||
| Reorderable sidebar sections (drag "Folders" above "Cloud Storage") | Same DB persistence problem. Section order is fixed and meaningful — user folders first, then external cloud. No self-hosted document manager reorders sections. | Fixed section order in `AppSidebar.vue`. |
|
||||
| Virtual scrolling for the document list | DocuVault is quota-capped at 100 MB per user. At typical document sizes (10–500 KB each), a user has at most a few hundred documents before hitting quota. Virtual scrolling adds significant complexity (dynamic row height, scroll restoration) for an edge case that the quota cap prevents. | Standard `v-for`. Add server-side pagination in a later milestone if needed. |
|
||||
| Rich text document annotations or in-app editing | Already scoped out in `PROJECT.md`. Mentioned here because UX redesigns often attract "what if we added..." scope creep. The preview modal shows PDF; that is the limit. | Stay read-only. Document content is immutable after upload. |
|
||||
| Dark mode toggle | Requires a systematic color token system across all components plus full testing of the inverted palette. The current light-mode palette is inconsistent — fix that first. Tailwind makes dark mode mechanically possible but the v0.2 payoff is low relative to scope. | Design tokens and CSS variables in v0.2 that would support dark mode in a future milestone. |
|
||||
| Drag-and-drop to reorder documents within a folder | Requires a persistent sort order column per user per folder. Documents are naturally sorted by creation date or name — both useful orderings. Custom ordering has high complexity and low frequency of use in a document vault. | Keep the existing sort controls (created_at, name, size). Server-side sort is already implemented. |
|
||||
| Full-screen modal for file upload | The DropZone is embedded in the file browser content area, which is the correct placement. A modal upload workflow adds navigation overhead with no benefit for a simple file picker. | The whole-page drag overlay (differentiator above) is the right scope. |
|
||||
| Notification center / inbox for async events | Building a polling-based notification center (classification done, quota warning) is a full feature, not UX polish. Celery classification runs in the background and its result is visible when the user next opens the document. | Toast on upload completion. Badge count on the document list is sufficient for v0.2. |
|
||||
| Multi-select with batch operations (select 10 files, delete all) | Requires a selection state layer across the file list, a selection-aware toolbar, and confirmed batch-delete UX. Medium-to-high complexity for a feature that is rarely needed in a personal document vault. | Address in a future milestone if user feedback identifies it as a gap. |
|
||||
| Drag documents from file list to sidebar folder entries | Cross-component drag state requires either a Pinia drag store or provide/inject. The sidebar `FolderTreeItem` and `StorageBrowser` have no shared parent that can coordinate state without significant refactoring. The "Move to folder" picker button already covers this use case. | The existing folder picker button in the file row actions menu. |
|
||||
|
||||
---
|
||||
|
||||
### Anti-Features (Deliberately Excluded)
|
||||
## Admin Panel: Specific Pattern Decisions
|
||||
|
||||
Features that seem good but would create problems for this project.
|
||||
|
||||
| Feature | Why Requested | Why Problematic | Alternative |
|
||||
|---------|---------------|-----------------|-------------|
|
||||
| Public link sharing (unauthenticated) | Users want to share with people not on the platform | Creates a public attack surface; quota abuse; legal exposure if abused; hard to revoke at scale | Out of scope for v1 per PROJECT.md. Named-user sharing with accept/decline serves legitimate use cases. |
|
||||
| In-app document editing | Users want a full office suite | Massive scope expansion (collaborative editing = CRDT, OT, conflict resolution); not core to document management; every vendor locks you into their editor | "View and organize" is the value; editing stays in the originating app. |
|
||||
| Real-time collaborative editing (Google Docs model) | Feels modern | Requires WebSocket infrastructure, OT/CRDT algorithms, presence indicators — easily 3x the codebase complexity of everything else combined | Explicit non-goal; DocuVault stores files, not live documents. |
|
||||
| Mobile app (iOS/Android) | Users want mobile access | React Native or Flutter doubles the implementation surface; mobile OAuth2 and background sync are non-trivial | Responsive web app is the minimum. PWA capabilities (offline-capable via service worker) are a future v2 differentiator. |
|
||||
| SSO / SAML / OAuth enterprise federation | Enterprise buyers ask for it | Premature: adds Keycloak or similar dependency, requires session model changes, needs testing against multiple IdPs | TOTP 2FA first; SSO when subscription billing lands. Schema already designed for extension. |
|
||||
| Subscription billing in-platform | Users want self-service upgrades | Payment processing is a separate product (Stripe integration, dunning, invoicing, tax). Doing it half-way creates billing bugs that destroy trust | Quota model is billing-ready (limit_bytes column); add Stripe when subscription tier is validated. |
|
||||
| Soft-delete / Trash with restore | Users accidentally delete things | Reasonable feature, but complicates quota accounting (does trash count against quota?), storage lifecycle, and purge timing. Drive's 30-day trash has caused user confusion about "why is my quota still full?" | Clear confirmation dialog before hard delete is the v1 approach. Trash can be added in v1.x. |
|
||||
| Document version history | Users want to see old versions | Correct for collaborative tools; for a personal document store where users own their files, versioning explodes storage use. Paperless-ngx doesn't have it. DocuWare does but it's enterprise | Hash-based deduplication (don't store the same file twice) is a better v1 primitive. Version history in v2 for users who need it. |
|
||||
| AI-generated document summaries | Seems valuable given AI integration | Every summary requires an AI call → cost scales with uploads; summaries become stale when topics change; storing summaries consumes quota | AI is used for classification only. Summary generation can be a user-triggered on-demand action later. |
|
||||
| Admin impersonation / "log in as user" | Admins want to debug user issues | Directly contradicts the privacy-first core value. If admin can impersonate, admin can access user documents. Trust collapses. | Structured audit logs give admins enough to diagnose issues without impersonation. Document this as an explicit architectural decision. |
|
||||
|
||||
---
|
||||
|
||||
## Feature Dependencies
|
||||
### Route structure
|
||||
|
||||
```
|
||||
[User Registration + Auth]
|
||||
└──requires──> [Email verification] (optional at v1, needed for password reset)
|
||||
└──requires──> [JWT session management]
|
||||
└──requires──> [Token revocation list] (for forced logout)
|
||||
|
||||
[TOTP 2FA]
|
||||
└──requires──> [Backup codes] (users get locked out without these)
|
||||
└──requires──> [User Auth base]
|
||||
|
||||
[Document Upload]
|
||||
└──requires──> [User Auth]
|
||||
└──requires──> [Quota enforcement]
|
||||
└──requires──> [Quota tracking (DB)]
|
||||
|
||||
[Folder Structure]
|
||||
└──requires──> [Document Upload]
|
||||
└──enhances──> [Search] (search within folder scope)
|
||||
|
||||
[Document Sharing]
|
||||
└──requires──> [User accounts] (both sender and recipient)
|
||||
└──requires──> [Folder Structure] ("Shared with me" virtual folder)
|
||||
└──requires──> [Permission model in DB]
|
||||
|
||||
[Share expiry]
|
||||
└──requires──> [Document Sharing base]
|
||||
└──requires──> [Background job / cron] (to revoke expired shares)
|
||||
|
||||
[Cloud Storage Integration]
|
||||
└──requires──> [User Auth] (OAuth2 tokens stored per user)
|
||||
└──requires──> [Credential encryption] (Fernet / pgcrypto)
|
||||
└──requires──> [StorageBackend adapter interface] (already planned)
|
||||
└──enhances──> [Quota tracking] (cloud quota shown separately)
|
||||
|
||||
[Per-document storage routing]
|
||||
└──requires──> [Cloud Storage Integration]
|
||||
└──requires──> [Multiple backends connected]
|
||||
|
||||
[Admin Panel]
|
||||
└──requires──> [User accounts]
|
||||
└──requires──> [Quota DB model]
|
||||
└──requires──> [Audit log]
|
||||
|
||||
[Audit Log]
|
||||
└──requires──> [User Auth] (actor_user_id)
|
||||
└──requires──> [All logged operations exist]
|
||||
└──conflicts──> [Admin impersonation] (impersonation breaks log integrity)
|
||||
|
||||
[GDPR data export]
|
||||
└──requires──> [Audit log]
|
||||
└──requires──> [Document metadata model]
|
||||
└──requires──> [Background export job] (large exports are async)
|
||||
|
||||
[AI classification]
|
||||
└──requires──> [Document upload + text extraction] (already exists)
|
||||
└──requires──> [Topic model] (already exists)
|
||||
└──enhances──> [Search] (topic-filtered search)
|
||||
|
||||
[In-browser PDF preview]
|
||||
└──requires──> [Document stored accessibly] (MinIO presigned URL or proxy endpoint)
|
||||
└──independent of──> [Cloud storage] (preview proxied through app, not direct cloud URL)
|
||||
/admin → AdminLayout.vue wrapper (persistent sidebar + router-view)
|
||||
/admin/ → AdminOverviewView.vue (stats at a glance)
|
||||
/admin/users → AdminUsersView.vue (wraps AdminUsersTab.vue)
|
||||
/admin/quotas → AdminQuotasView.vue (wraps AdminQuotasTab.vue)
|
||||
/admin/ai → AdminAiConfigView.vue (wraps AdminAiConfigTab.vue)
|
||||
/admin/audit → AdminAuditView.vue (wraps AuditLogTab.vue)
|
||||
```
|
||||
|
||||
### Dependency Notes
|
||||
The existing tab components (`AdminUsersTab.vue`, `AdminQuotasTab.vue`, `AdminAiConfigTab.vue`, `AuditLogTab.vue`) are promoted to route-level views. The `AdminLayout.vue` replaces `AdminView.vue`. The tab strip becomes a sidebar with router-link active styling. No logic changes inside the tab components — only the container changes. `AdminView.vue` is deleted after the migration.
|
||||
|
||||
- **TOTP requires backup codes:** Without backup codes, users who lose their phone lose their account permanently. This is a support nightmare and a documented UX failure in many 2FA implementations.
|
||||
- **Forced logout requires server-side token tracking:** Pure stateless JWT cannot support "sign out all devices." A revocation list (Redis or DB table) or short-lived JWTs (15 min) + refresh token table is required. This is a non-trivial architecture decision that must be resolved before auth is implemented.
|
||||
- **Share expiry requires a background job:** Expiry cannot be purely DB-enforced. A cron job or Celery task must scan and revoke expired shares, or each share-check must evaluate expiry at access time (lazy revocation — simpler, acceptable for v1).
|
||||
- **Per-document storage routing is independent of the default storage selector:** Default storage is "which backend do new uploads go to by default?" Routing is "for this specific upload, override the default." Routing is a differentiator; default selector is table stakes.
|
||||
- **Admin impersonation conflicts with privacy-first model:** These two features are architecturally incompatible. Document this as an explicit decision in PROJECT.md.
|
||||
- **GDPR export is async:** Exporting all user data (documents + metadata) can take minutes for large accounts. Must be a background job with "email me when ready" — not a synchronous HTTP download.
|
||||
Vue Router 4 nested routes pattern (HIGH confidence — verified against official docs):
|
||||
|
||||
```js
|
||||
{
|
||||
path: '/admin',
|
||||
component: AdminLayout, // contains <router-view />
|
||||
meta: { requiresAdmin: true },
|
||||
children: [
|
||||
{ path: '', component: AdminOverviewView },
|
||||
{ path: 'users', component: AdminUsersView },
|
||||
{ path: 'quotas', component: AdminQuotasView },
|
||||
{ path: 'ai', component: AdminAiConfigView },
|
||||
{ path: 'audit', component: AdminAuditView },
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
The `requiresAdmin` guard moves from the child route to the parent. All children inherit it automatically.
|
||||
|
||||
### Admin sidebar nav items (in order)
|
||||
1. Overview
|
||||
2. Users
|
||||
3. Quotas
|
||||
4. AI Config
|
||||
5. Audit Log
|
||||
|
||||
A "Back to app" link at the bottom of the admin sidebar returns to `/` — admin should not feel like a dead end.
|
||||
|
||||
### Admin sidebar does NOT share code with `AppSidebar.vue`
|
||||
|
||||
`AdminSidebar.vue` is a separate component. It has no folder tree, no cloud tree, no topics list, no quota bar. Those belong to the user interface. Sharing the sidebar component would create coupling between two logically separate contexts and conflict with the "thin view + smart component" architecture described in CLAUDE.md.
|
||||
|
||||
### Breadcrumb
|
||||
|
||||
Use the existing `FolderBreadcrumb.vue` or a simpler static variant: `Admin > [Section Name]`. No dynamic nesting required. The admin sidebar's active link already signals location; the breadcrumb adds skimmability for users who navigate via URL.
|
||||
|
||||
---
|
||||
|
||||
## MVP Definition (This Milestone)
|
||||
## Empty State Patterns: Specific Decisions
|
||||
|
||||
This is a subsequent milestone — the core document + AI system exists. MVP for this milestone is everything in PROJECT.md Active section, implemented in a way that doesn't create rework.
|
||||
Each zero-content context gets a distinct implementation. Generic "No items" text is the anti-pattern.
|
||||
|
||||
### Must Ship (v1 — this milestone)
|
||||
| Context | Headline | Subtext | CTA |
|
||||
|---------|----------|---------|-----|
|
||||
| Root folder (no folders yet) | "Start organizing your documents" | "Create a folder to group related files together." | "New folder" button |
|
||||
| Folder is empty (exists but has no contents) | "This folder is empty" | "Upload files here or move documents into this folder." | "Upload files" link (triggers DropZone click) |
|
||||
| Search returns no results | "No matches for '{query}'" | "Try a different search term or clear your search." | "Clear search" button |
|
||||
| Shared with me (no shares yet) | "Nothing shared with you yet" | "When someone shares a document with your handle, it appears here." | None (passive state) |
|
||||
| Topics list empty | "No topics yet" | "Topics are created automatically when you upload and classify a document." | None |
|
||||
| Audit log (admin, no entries yet) | "No audit events recorded" | "Events are recorded when users log in, upload documents, or make changes." | None |
|
||||
| Cloud storage — no connections | "No cloud storage connected" | "Connect OneDrive, Google Drive, Nextcloud, or WebDAV in Settings." | "Open Settings" link |
|
||||
|
||||
- [ ] Email + password registration with strength validation — table stakes, nothing works without it
|
||||
- [ ] JWT sessions with refresh tokens + forced logout capability — security baseline
|
||||
- [ ] TOTP 2FA with backup codes — PROJECT.md requires it; backup codes prevent lockouts
|
||||
- [ ] Password reset via email — users will forget passwords
|
||||
- [ ] Per-user isolated storage (MinIO prefix per user ID) — without this, multi-user is unsafe
|
||||
- [ ] Quota tracking (DB) + enforcement at upload + visible indicator — table stakes for any quota system
|
||||
- [ ] Quota warnings at 80% and 95% — prevents users hitting the wall blindly
|
||||
- [ ] Create / rename / delete folders with breadcrumb navigation — table stakes file management
|
||||
- [ ] Move document to folder (context menu minimum; drag-drop in v1.x) — without this folder structure is useless
|
||||
- [ ] Sort by name/date/size — basic list management
|
||||
- [ ] Global search (metadata + extracted text) — without this the product is a dumb file cabinet
|
||||
- [ ] Share document with named user by handle (view-only default) — core sharing primitive
|
||||
- [ ] Revoke share with immediate effect — security; users must be able to undo shares
|
||||
- [ ] "Shared with me" virtual folder — PROJECT.md requires it
|
||||
- [ ] Cloud storage connect flow (Google Drive + OneDrive OAuth2) — PROJECT.md requires it
|
||||
- [ ] Connection status indicator + error state with local fallback — users need to know if cloud is broken
|
||||
- [ ] Default storage backend selector — users need to control where uploads go
|
||||
- [ ] Credential encryption (Fernet + env key) — PROJECT.md hard requirement
|
||||
- [ ] Admin: user list, create, deactivate, quota adjustment — PROJECT.md requires it
|
||||
- [ ] Admin: AI provider/model assignment per user + system default — PROJECT.md requires it
|
||||
- [ ] Audit log (append-only): auth events + data events — PROJECT.md requires it
|
||||
- [ ] Admin audit log viewer with date/user/action filters — PROJECT.md requires it
|
||||
- [ ] In-browser PDF preview (PDF.js or native) — without preview, users must download to read
|
||||
- [ ] Document metadata panel (size, date, topics, storage backend) — contextual information users expect
|
||||
Rule: every empty state that the user can resolve with an action gets exactly one CTA. Empty states that are passive (shared-with-me before anyone shares, topics before first upload, audit before any events) get explanatory subtext only — no CTA that leads nowhere useful.
|
||||
|
||||
### Add After Core Validated (v1.x)
|
||||
|
||||
- [ ] Share expiry date — valuable for security-conscious users; requires background job
|
||||
- [ ] Explicit share accept/decline — adds trust; low complexity
|
||||
- [ ] "What I've shared" global list in settings — users need to audit their shares
|
||||
- [ ] In-app share notification — without email infrastructure, in-app is the fallback
|
||||
- [ ] Storage usage breakdown by folder — power user feature; quota bar is sufficient at v1
|
||||
- [ ] CSV export of audit log — compliance teams want this; not day-one critical
|
||||
- [ ] Log retention policy configuration — needed for GDPR compliance; default 1yr is fine for v1
|
||||
- [ ] Drag-and-drop document move — UX polish; context menu is the functional minimum
|
||||
- [ ] "Recent documents" virtual view — convenience; not blocking
|
||||
|
||||
### Future (v2+)
|
||||
|
||||
- [ ] GDPR data export (Article 20) — required eventually; complex (async job); defer until user base exists
|
||||
- [ ] Per-document storage routing (override default per upload) — strong differentiator but complex; v2
|
||||
- [ ] User-facing activity log (own audit trail) — GDPR-aligned trust feature; v2
|
||||
- [ ] Soft-delete / Trash with restore — adds quota accounting complexity; solve properly in v2
|
||||
- [ ] Document version history — storage-intensive; needs a clear retention policy first
|
||||
- [ ] SSO / SAML — per PROJECT.md, after subscription billing
|
||||
- [ ] Public link sharing — per PROJECT.md, explicitly out of scope for v1
|
||||
- [ ] Platform health dashboard at /admin/health — operational convenience; Docker healthchecks handle v1
|
||||
Implementation: extract a shared `EmptyState.vue` presentational component that accepts `headline`, `subtext`, and an optional `action` slot. Use it in all seven contexts above instead of duplicating the layout.
|
||||
|
||||
---
|
||||
|
||||
## Feature Prioritization Matrix
|
||||
## Loading State Patterns: Specific Decisions
|
||||
|
||||
| Feature | User Value | Implementation Cost | Priority |
|
||||
|---------|------------|---------------------|----------|
|
||||
| Per-user auth (registration, login, JWT) | HIGH | LOW | P1 |
|
||||
| TOTP 2FA + backup codes | HIGH | MEDIUM | P1 |
|
||||
| Password reset | HIGH | LOW | P1 |
|
||||
| Quota tracking + enforcement + indicator | HIGH | LOW | P1 |
|
||||
| Quota warnings (80%, 95%) | HIGH | LOW | P1 |
|
||||
| Folder CRUD + breadcrumb | HIGH | LOW | P1 |
|
||||
| Move document to folder | HIGH | LOW | P1 |
|
||||
| Global search | HIGH | MEDIUM | P1 |
|
||||
| Share with named user (view-only) | HIGH | MEDIUM | P1 |
|
||||
| Revoke share | HIGH | LOW | P1 |
|
||||
| "Shared with me" folder | HIGH | LOW | P1 |
|
||||
| Cloud connect flow (OAuth2) | HIGH | HIGH | P1 |
|
||||
| Connection status + error state + local fallback | HIGH | MEDIUM | P1 |
|
||||
| Default storage selector | HIGH | LOW | P1 |
|
||||
| Credential encryption | HIGH | MEDIUM | P1 |
|
||||
| Admin user management (list/create/deactivate/quota) | HIGH | LOW | P1 |
|
||||
| Admin AI config | MEDIUM | LOW | P1 |
|
||||
| Audit log (append-only) | HIGH | MEDIUM | P1 |
|
||||
| Admin audit log viewer | MEDIUM | MEDIUM | P1 |
|
||||
| In-browser PDF preview | HIGH | MEDIUM | P1 |
|
||||
| Document metadata panel | MEDIUM | LOW | P1 |
|
||||
| Forced logout / session revocation | MEDIUM | MEDIUM | P2 |
|
||||
| Share expiry date | MEDIUM | MEDIUM | P2 |
|
||||
| Explicit share accept/decline | MEDIUM | LOW | P2 |
|
||||
| "What I've shared" list | MEDIUM | LOW | P2 |
|
||||
| Storage usage breakdown by folder | MEDIUM | MEDIUM | P2 |
|
||||
| CSV export of audit log | MEDIUM | LOW | P2 |
|
||||
| Log retention policy | MEDIUM | LOW | P2 |
|
||||
| Drag-and-drop move | MEDIUM | MEDIUM | P2 |
|
||||
| Recent documents view | LOW | LOW | P2 |
|
||||
| Per-document storage routing | HIGH | HIGH | P3 |
|
||||
| GDPR data export | MEDIUM | HIGH | P3 |
|
||||
| Soft-delete / Trash | MEDIUM | HIGH | P3 |
|
||||
| User-facing activity log | MEDIUM | LOW | P3 |
|
||||
| Document version history | LOW | HIGH | P3 |
|
||||
| Platform health dashboard | LOW | MEDIUM | P3 |
|
||||
| Component | Current | Target | Rationale |
|
||||
|-----------|---------|--------|-----------|
|
||||
| Document list (`StorageBrowser`) | `<div>Loading…</div>` text | 6–8 skeleton rows (5-col grid, `animate-pulse`) | List loads on every folder navigation. Skeletons match the grid layout exactly, preventing layout jump. |
|
||||
| Sidebar folder tree | `<div>Loading…</div>` text | 3 skeleton nav items (indent + placeholder bar) | Sidebar loads once on mount. Short skeleton is sufficient. |
|
||||
| Sidebar topics list | `<div>Loading…</div>` text | 4 skeleton topic pills (color dot + bar) | Same rationale as folder tree. |
|
||||
| Admin user table | No loading state | Skeleton table rows (3–5 rows, matching column count) | Admin tables are data-heavy; skeleton preserves table chrome during load. |
|
||||
| Audit log table | No loading state | Skeleton rows matching timestamp/user/action columns | Same. |
|
||||
| Upload progress item | Spinner + progress bar (correct) | Keep as-is | Upload is a blocking action, not a content load. Spinners are correct for actions. |
|
||||
| QuotaBar | `animate-pulse` bar (correct) | No change | Already implemented correctly. Document as the canonical skeleton pattern. |
|
||||
| Document preview modal | None | Spinner centered in modal body | PDF proxy fetch is a single-request action. Spinner is correct. |
|
||||
|
||||
Rule: if the loading UI represents content the user will read (list, table, tree), use a skeleton. If the loading UI represents a system action (save, upload, submit, process), use a spinner. Never show a loading state that will be visible for less than 300ms — add a minimum display delay.
|
||||
|
||||
---
|
||||
|
||||
## Competitor Feature Analysis
|
||||
## Drag-and-Drop: Scope Boundaries
|
||||
|
||||
| Feature | Google Drive | Dropbox | Box | Paperless-ngx | DocuVault Plan |
|
||||
|---------|--------------|---------|-----|----------------|----------------|
|
||||
| Share by named user | Yes (email) | Yes (email) | Yes (email + internal) | No (single-user) | Yes (by handle) |
|
||||
| Share permission levels | View / Comment / Edit | View / Edit | View / Edit / Co-owner | N/A | View-only v1; edit later |
|
||||
| Share expiry | Google Workspace only | Business+ only | Business+ free tier | N/A | Include in v1.x — differentiator at free tier |
|
||||
| Public link sharing | Yes | Yes | Yes | No | Explicitly excluded v1 |
|
||||
| Quota indicator | Yes (prominent) | Yes | Yes | N/A (local disk) | Yes — progress bar + text |
|
||||
| Quota warnings | Yes (email at 80%) | Yes (email at 90%) | Yes | N/A | In-app banner at 80%, 95% |
|
||||
| Folder organization | Yes (arbitrary depth) | Yes | Yes | Yes | Yes (arbitrary depth) |
|
||||
| Drag-and-drop move | Yes | Yes | Yes | Yes | v1.x (context menu at v1) |
|
||||
| Global search | Yes (full-text) | Yes (full-text) | Yes (full-text) | Yes (extracted text) | Yes (extracted text — already extracted) |
|
||||
| AI classification | No (manual labels) | No | No | Basic rules-based | Yes — core differentiator |
|
||||
| Audit log (admin) | Google Workspace | Business+ | All tiers | No | Yes — all tiers |
|
||||
| TOTP 2FA | Yes | Yes | Yes | Yes | Yes |
|
||||
| Backup codes | Yes | Yes | Yes | Yes | Yes — required with TOTP |
|
||||
| Bring-your-own storage | No | No | No | Partially (local FS) | Yes — core differentiator |
|
||||
| Privacy-first admin model | No (Google can read) | No | No | N/A (self-hosted) | Yes — core differentiator |
|
||||
| In-browser PDF preview | Yes | Yes | Yes | Yes | Yes (PDF.js) |
|
||||
| Document version history | Yes | Yes (30 days free) | Yes (30 days free) | No | v2 |
|
||||
| GDPR data export | Yes (Google Takeout) | Yes | Yes | N/A | v2 |
|
||||
### Build in v0.2
|
||||
|
||||
1. **Whole-page drop overlay for file upload** — listen for `dragenter` at the document level, show a full-screen overlay, delegate the `drop` event to the existing DropZone emit chain. The drop must only activate when files are being dragged (check `e.dataTransfer.types.includes('Files')`).
|
||||
|
||||
2. **Move a document to a folder by dragging the file row onto a folder row** — already implemented in `StorageBrowser.vue`. Verify it functions correctly and polish the drop highlight: `ring-2 ring-inset ring-amber-300` on the folder row is correct. Ensure the file row shows reduced opacity during drag (`opacity-50` already applied).
|
||||
|
||||
### Do Not Build in v0.2
|
||||
|
||||
- Dragging files from the file list onto sidebar folder entries (requires cross-component drag state via Pinia or provide/inject — the "Move to folder" picker already covers this)
|
||||
- Touch drag-and-drop on mobile (HTML5 drag events do not fire on iOS Safari without a polyfill library; defer to the move picker button)
|
||||
- Drag folders to reorder them
|
||||
|
||||
### Required for every drag interaction
|
||||
|
||||
- Visual affordance on dragover (already done on DropZone; add to whole-page overlay)
|
||||
- Non-drag alternative for every drag action: the "Move to folder" picker button covers the drag-to-move case
|
||||
- Drop must be clearly confirmed: file row disappears from source location and appears in target on success
|
||||
|
||||
---
|
||||
|
||||
## Critical UX Patterns to Follow
|
||||
## Keyboard Shortcuts: Final List
|
||||
|
||||
### Quota UX (from Drive / Dropbox study)
|
||||
| Shortcut | Action | Condition |
|
||||
|----------|--------|-----------|
|
||||
| `/` | Focus search bar | Not in an input, textarea, or contenteditable |
|
||||
| `Escape` | Close modal or clear active inline input | Modal open, or search focused with content |
|
||||
| `U` | Trigger file picker (upload) | Not in any input, on a folder/file manager view |
|
||||
| `N` | Start new folder inline input | Not in any input, on a folder/file manager view |
|
||||
|
||||
**Sidebar quota bar pattern** (Drive): Always-visible storage indicator at the bottom of the left sidebar. Shows "X.X MB of Y MB used" with a color-coded bar (green → yellow → red as quota fills). This is the pattern users are conditioned to expect.
|
||||
### Do Not Build
|
||||
|
||||
**Upload rejection UX**: Never show a generic error. Show: current usage, quota limit, how much the rejected file would have added, and a direct link to storage settings. Dropbox does this well; many self-hosted tools fail here.
|
||||
|
||||
**Quota warning banner**: Non-modal, dismissable, but persistent. Appears at 80% — amber. At 95% — red. At 100% — blocks upload with inline error (not just a banner).
|
||||
|
||||
### Folder UX (from Drive / Explorer pattern)
|
||||
|
||||
**Breadcrumb is mandatory**: Any folder deeper than one level without a breadcrumb creates navigation confusion. Users instinctively hit "back" in their browser and are surprised to leave the app.
|
||||
|
||||
**Empty folder state**: Show a clear empty state ("This folder has no documents yet. Upload one to get started.") — not a blank white space.
|
||||
|
||||
**Delete folder confirmation must list contents**: "Are you sure? This will permanently delete 47 documents." — not just a generic "are you sure?"
|
||||
|
||||
### Sharing UX (from Box / Drive)
|
||||
|
||||
**Share dialog anti-pattern to avoid**: Auto-sending share notifications without preview. Drive's "A notification will be sent" with an optional message is the correct pattern — user controls whether to notify.
|
||||
|
||||
**Shared document visual indicator**: An icon overlay (people icon) in list view on shared items. Without this, users lose track of what they've shared. Drive and Box both do this.
|
||||
|
||||
**Revoke is immediate and feedback is given**: "Access revoked for user@handle" toast. Not silent.
|
||||
|
||||
### Cloud Integration UX (from Dropbox Business / Google Drive)
|
||||
|
||||
**Connection health must be persistent**: Don't only show errors at connect time. Show ongoing status in storage settings. A disconnected cloud backend that silently fails uploads is a data-loss scenario.
|
||||
|
||||
**Token expiry is silent without handling**: OAuth2 tokens expire. If the app doesn't handle refresh silently (or at least alert the user clearly), users will think their uploads succeeded when they didn't. **This is a critical pitfall.**
|
||||
- `J`/`K` for row-by-row navigation — requires focus management, ARIA selected state, and keyboard event bubbling control. Over-engineered for a vault where opening a document is secondary to browsing and uploading.
|
||||
- `Ctrl+A` / `Cmd+A` for select all — requires multi-select, which is an anti-feature.
|
||||
- Arrow key tree navigation in the sidebar — screen readers handle this natively; custom arrow-key navigation would conflict with browser defaults.
|
||||
- `?` shortcut for a shortcut reference modal — too few shortcuts to warrant a help overlay.
|
||||
|
||||
---
|
||||
|
||||
## What We Might Miss (Gap Analysis)
|
||||
## Responsive Layout: Breakpoint Decisions
|
||||
|
||||
Items that competitors have which aren't in PROJECT.md Active requirements and are easy to overlook:
|
||||
| Viewport | Tailwind breakpoint | Sidebar | Document list | Admin |
|
||||
|----------|---------------------|---------|--------------|-------|
|
||||
| Mobile portrait | `< 640px` (below `sm`) | Hidden; hamburger button + overlay drawer | Icon + name only; Size (`hidden md:block`) and Modified (`hidden sm:block`) hidden | Same drawer |
|
||||
| Mobile landscape / small tablet | `640–767px` (`sm`) | Hidden; hamburger still active | Icon + name + Modified visible; Size hidden | Same |
|
||||
| Tablet portrait | `768–1023px` (`md`) | Hidden; hamburger still active | Full 5-col grid | Full columns |
|
||||
| Tablet landscape / small desktop | `1024px+` (`lg`) | Always visible (256px fixed) | Full 5-col grid | Full admin sidebar + content |
|
||||
| Desktop | `1280px+` (`xl`) | Always visible | Full grid + comfortable padding | Full layout |
|
||||
|
||||
1. **Backup codes for TOTP** — PROJECT.md mentions TOTP but not backup codes. Without backup codes, a lost phone = permanently locked-out account. Every 2FA implementation must include these. HIGH severity omission.
|
||||
Key decision: sidebar collapses at the `lg` breakpoint (1024px), using `hidden lg:flex` on the sidebar and `lg:hidden` on the hamburger button. At 1024px the sidebar (256px) leaves 768px for content — sufficient for the 5-column grid with room for padding.
|
||||
|
||||
2. **Quota warning thresholds** — PROJECT.md says "quota enforced; uploads rejected." It doesn't mention pre-emptive warnings at 80%/95%. Users who hit the wall without warning give negative reviews. Easy to implement; easy to forget.
|
||||
Touch targets: all inline action icon buttons are currently `p-1.5` (approximately 30px). Increase to `p-2` on `sm:` and below using responsive padding classes. 44px is the WCAG target — not achievable for inline buttons without breaking the grid layout, but 36px is a reasonable minimum.
|
||||
|
||||
3. **Session revocation / forced logout** — Not in PROJECT.md. JWT-based auth has no built-in revocation. If a user believes their account is compromised, they need "sign out everywhere." Requires either short-lived JWTs + refresh token table, or a server-side revocation list.
|
||||
---
|
||||
|
||||
4. **Breadcrumb navigation** — Easy to forget in folder implementation. The folder CRUD is in PROJECT.md but the navigation UX isn't. Without breadcrumbs, nested folders become unusable.
|
||||
## Feature Dependencies (summary)
|
||||
|
||||
5. **"What I've shared" list** — PROJECT.md covers sharing mechanics but doesn't cover share auditability from the sharer's perspective. Users who've shared many documents need a way to manage them all.
|
||||
```
|
||||
Admin route subtree
|
||||
→ AdminLayout.vue (new) contains AdminSidebar.vue (new) + <router-view>
|
||||
→ Child views wrap existing AdminUsersTab, AdminQuotasTab, AdminAiConfigTab, AuditLogTab
|
||||
→ AdminView.vue deleted after migration
|
||||
|
||||
6. **Upload error when cloud backend is unreachable** — PROJECT.md says "documents stored in cloud backend accessed via app." What happens if the cloud backend is down at upload time? Needs explicit handling: local fallback with a flag, or queue with retry, or reject with explanation. Silence = data loss.
|
||||
Empty states
|
||||
→ New EmptyState.vue (presentational, accepts headline/subtext/action slot)
|
||||
→ Used in StorageBrowser.vue, SharedView.vue, TopicsView.vue, CloudStorageView.vue, AuditLogTab.vue
|
||||
|
||||
7. **MinIO presigned URL vs proxy for document access** — Not a feature gap but an architecture gap that affects features: if documents in cloud backends are accessed via presigned URLs, the URL leaks the storage path. If proxied through the app, privacy is preserved but adds load to the backend. For a privacy-first platform, proxy is the correct choice — but it must be a conscious decision before the cloud integration is built.
|
||||
Skeleton rows
|
||||
→ New SkeletonRow.vue (5-col grid, animate-pulse)
|
||||
→ Used in StorageBrowser.vue (document list), AppSidebar.vue (folder tree, topics list)
|
||||
|
||||
8. **Empty folder state and confirmation dialogs** — Micro-UX that competitors all get right. Easy to skip in implementation. Users notice.
|
||||
Keyboard shortcuts
|
||||
→ Global keydown listener in FileManagerView.vue
|
||||
→ SearchBar.vue exposes focus() method
|
||||
→ DropZone.vue exposes triggerInput() (already exists as triggerInput())
|
||||
→ StorageBrowser.vue exposes startNewFolder() (already defineExposed)
|
||||
|
||||
9. **Shared document icon in list view** — Small visual indicator but prevents users from losing track of what they've shared. Three lines of CSS; easy to miss in sprint planning.
|
||||
Mobile sidebar
|
||||
→ App.vue holds sidebarOpen boolean state
|
||||
→ AppSidebar.vue accepts isOpen prop + emits close
|
||||
→ Hamburger button in App.vue header (mobile only, hidden lg:hidden)
|
||||
|
||||
10. **Admin cannot set quota below current usage without warning** — Obvious in hindsight but easy to leave as a silent truncation. Must warn and require explicit confirmation.
|
||||
Whole-page drop overlay
|
||||
→ New PageDropOverlay.vue (full-screen overlay, accepts active prop)
|
||||
→ FileManagerView.vue listens for document dragenter/dragleave
|
||||
→ On drop, delegates to existing upload flow via onFilesSelected
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- Google Drive feature set: training knowledge through Aug 2025 (stable, well-documented product)
|
||||
- Microsoft OneDrive feature set: training knowledge through Aug 2025
|
||||
- Dropbox feature set: training knowledge through Aug 2025
|
||||
- Box feature set: training knowledge through Aug 2025 (enterprise DMS reference)
|
||||
- Notion: training knowledge through Aug 2025 (organization patterns)
|
||||
- Paperless-ngx: training knowledge through Aug 2025 (self-hosted DMS reference — open source, well-documented)
|
||||
- DocuWare: training knowledge through Aug 2025 (enterprise DMS reference)
|
||||
- Web fetch and web search unavailable during this research session; confidence reduced to MEDIUM for specific UI detail claims; HIGH for feature existence claims (these are all mature, stable platforms)
|
||||
|
||||
---
|
||||
*Feature research for: DocuVault — SaaS Document Management Platform*
|
||||
*Researched: 2026-05-21*
|
||||
- Vue Router 4 nested routes: https://router.vuejs.org/guide/essentials/nested-routes
|
||||
- Skeleton screens vs. spinners UX: https://www.onething.design/post/skeleton-screens-vs-loading-spinners
|
||||
- Skeleton loading screen design: https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/
|
||||
- SaaS empty state patterns: https://pixxen.com/saas-empty-state-design/
|
||||
- IBM Carbon Design System empty states: https://carbondesignsystem.com/patterns/empty-states-pattern/
|
||||
- Drag-and-drop SaaS UX: https://www.eleken.co/blog-posts/drag-and-drop-ui
|
||||
- Drag-and-drop NN/g guidelines: https://www.nngroup.com/articles/drag-drop/
|
||||
- Responsive SaaS breakpoints: https://tryhoverify.com/blog/responsive-design-breakpoints-2024-guide/
|
||||
- Keyboard shortcut design for web apps: https://sashika.medium.com/j-k-or-how-to-choose-keyboard-shortcuts-for-web-applications-a7c3b7b408ee
|
||||
- Nextcloud layout patterns: https://docs.nextcloud.com/server/latest/developer_manual/design/layout.html
|
||||
- Paperless-ngx frontend architecture: https://deepwiki.com/paperless-ngx/paperless-ngx/2-frontend-architecture
|
||||
|
||||
+205
-465
@@ -1,550 +1,290 @@
|
||||
# Pitfalls Research
|
||||
# Domain Pitfalls — v0.2 UI Overhaul and Optimization
|
||||
|
||||
**Domain:** Multi-user SaaS document management platform (FastAPI + Vue 3, PostgreSQL + MinIO, cloud storage integrations)
|
||||
**Researched:** 2026-05-21
|
||||
**Confidence:** HIGH (auth/storage/multi-tenancy patterns are well-established; specific FastAPI + MinIO combination is MEDIUM — no web search available)
|
||||
**Project:** DocuVault
|
||||
**Milestone:** v0.2 — UI Overhaul and Optimization on existing FastAPI + Vue 3 app
|
||||
**Researched:** 2026-06-07
|
||||
**Confidence:** HIGH (all pitfalls grounded in actual source files: router/index.js, App.vue, main.py, client.js, StorageBrowser.vue, DocumentCard.vue, DropZone.vue, AppSidebar.vue, and all api/*.py router files)
|
||||
|
||||
---
|
||||
|
||||
## Critical Pitfalls
|
||||
|
||||
### Pitfall 1: JWT in localStorage — XSS Gives Full Account Takeover
|
||||
Mistakes that cause regressions, security gaps, or rewrites.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 1: FastAPI Router Splitting — Prefix Already Embedded in APIRouter, Not in include_router
|
||||
|
||||
**Phase:** Backend refactoring (split large router files)
|
||||
|
||||
**What goes wrong:** Every existing router in this codebase declares its prefix on the `APIRouter` instance itself — `router = APIRouter(prefix="/api/documents", tags=["documents"])` — NOT on the `include_router(router, prefix=...)` call in `main.py`. When splitting a large file (e.g. `documents.py` at 852 lines, `admin.py` at 934 lines) into sub-modules, the new sub-routers pick up their endpoints via an `include_router` call inside the original module, or they are wired directly in `main.py`. Either way, if you add a prefix on `include_router` in addition to the prefix on the inner `APIRouter`, all URLs double-prefix to `/api/documents/api/documents/...`. Likewise, if you strip the prefix from the inner router and forget to add it to `include_router`, all URLs return 404.
|
||||
|
||||
**Why it happens:** The original pattern (`router = APIRouter(prefix=...)` in the module + `app.include_router(router)` without a prefix in `main.py`) is unusual but consistent in this project. Developers splitting a file expect the standard pattern where prefixes go on `include_router`, not on the router definition.
|
||||
|
||||
**Consequences:** 404 on all endpoints in the split module; existing tests and the frontend `client.js` (which hard-codes `/api/documents`, `/api/admin`, etc.) silently break.
|
||||
|
||||
**Prevention:** When splitting, create sub-routers with NO prefix: `sub = APIRouter(tags=["documents-upload"])`. Register them inside the parent module with `router.include_router(sub)` so the parent's prefix propagates. The parent module keeps its existing prefix and its existing `app.include_router(parent)` call in `main.py` is unchanged.
|
||||
|
||||
**Detection warning signs:** Any test that calls `/api/documents/*` returns 404 immediately after the split; Swagger UI shows doubled path segments.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 2: FastAPI Router Splitting — Circular Import via Shared Dependencies
|
||||
|
||||
**Phase:** Backend refactoring
|
||||
|
||||
**What goes wrong:** `folders.py` already exports a `document_move_router = APIRouter(prefix="/api/documents")` — a cross-cutting concern documented in the file (line 439-442). When splitting `documents.py`, if the new sub-module imports anything from `api/folders.py` (e.g. a shared validator or Pydantic schema), Python raises `ImportError: cannot import name X` at startup because both modules are in partial initialization state.
|
||||
|
||||
**Why it happens:** FastAPI modules that share models and validators tend to grow cross-references. The `document_move_router` in `folders.py` under the `/api/documents` prefix is the existing example — any new import in the opposite direction closes the import cycle.
|
||||
|
||||
**Consequences:** Application fails to start. Docker container exits immediately.
|
||||
|
||||
**Prevention:** Shared Pydantic models and validators must live in `db/models.py` or a dedicated `schemas/` module — not in router files. Before splitting, grep for any `from api.X import` inside the router files being split and move the shared symbols to a neutral module first.
|
||||
|
||||
**Detection warning signs:** `ImportError` or `cannot import name` in the uvicorn startup log.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 3: AdminLayout Vue Router Integration — beforeEach Guard Misses /admin/* Children
|
||||
|
||||
**Phase:** Admin panel rearchitecture
|
||||
|
||||
**What goes wrong:** The current guard in `router/index.js` (lines 81-93) checks `to.meta.requiresAdmin` on the matched route object. The current `/admin` route is a flat route with that meta set directly. When `/admin` becomes a parent route with nested children (`/admin/users`, `/admin/audit`, etc.), the children do NOT automatically inherit `meta: { requiresAdmin: true }` from the parent in Vue Router 4 unless the guard iterates `to.matched`. If the children are added without repeating the meta, the guard's `to.meta.requiresAdmin` check evaluates to `undefined` (falsy) for every child route — non-admin users can navigate to `/admin/users` directly.
|
||||
|
||||
**Why it happens:** Vue Router 4 does NOT merge parent `meta` into child `meta` by default. `to.meta` reflects only the deepest matched route's own meta, not the parent's.
|
||||
|
||||
**Consequences:** Security regression — the admin guard that currently works correctly stops protecting all admin child routes. Non-admin users can access `/admin/users`, `/admin/audit`, etc.
|
||||
|
||||
**Prevention:** Update the guard to check `to.matched.some(r => r.meta.requiresAdmin)` instead of `to.meta.requiresAdmin`. This is the correct Vue Router 4 idiom for inherited meta and requires one change to the guard. Apply the same fix to the `!to.meta.public` check if any auth routes gain children.
|
||||
|
||||
```javascript
|
||||
// router/index.js — change:
|
||||
if (to.meta.requiresAdmin && authStore.user?.role !== 'admin') {
|
||||
// to:
|
||||
if (to.matched.some(r => r.meta.requiresAdmin) && authStore.user?.role !== 'admin') {
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 4: AdminLayout Integration — App.vue Layout Switch Breaks for /admin/* Routes
|
||||
|
||||
**Phase:** Admin panel rearchitecture
|
||||
|
||||
**What goes wrong:** `App.vue` currently switches between `AuthLayout` (when `route.meta.layout === 'auth'`) and the main app shell (sidebar + `<router-view>`) for everything else. The admin panel needs a third layout (`AdminLayout`) with its own nav. The naive approach — `v-else-if="route.meta.layout === 'admin'"` in `App.vue` rendering `AdminLayout` which then renders `<router-view />` — creates double rendering: `App.vue`'s `<router-view>` already resolved the full route. The inner `<router-view>` inside `AdminLayout` gets nothing because the route is already consumed.
|
||||
|
||||
**Consequences:** Admin layout renders with an empty content area, or the admin page renders without the admin chrome.
|
||||
|
||||
**Prevention:** The correct structure for a standalone admin layout in Vue Router 4:
|
||||
|
||||
```javascript
|
||||
// router/index.js
|
||||
{
|
||||
path: '/admin',
|
||||
component: AdminLayout, // resolves to the layout shell, which contains <router-view />
|
||||
meta: { requiresAdmin: true },
|
||||
children: [
|
||||
{ path: '', redirect: '/admin/users' },
|
||||
{ path: 'users', component: AdminUsersView },
|
||||
{ path: 'quotas', component: AdminQuotasView },
|
||||
{ path: 'ai', component: AdminAiView },
|
||||
{ path: 'audit', component: AdminAuditView },
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
`AdminLayout.vue` contains `<router-view />` where page content renders. `App.vue` remains unchanged — it renders the component that the route resolves to, which is now `AdminLayout`. No third branch in `App.vue` is needed.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 5: client.js Splitting — noRefreshPaths Breaks When Paths Move to Sub-modules
|
||||
|
||||
**Phase:** Frontend refactoring (client.js split)
|
||||
|
||||
**What goes wrong:** `client.js` has a hardcoded `noRefreshPaths` list inside `request()` (line 26) that guards against infinite refresh loops. If `request()` is moved to a shared `api/core.js` module and the path list stays there, it works. But the three blob-download functions (`adminExportAuditLogCsv`, `adminDownloadDailyExport`, `fetchDocumentContent`) each contain a duplicated copy of the 401-refresh-retry logic. When splitting `client.js` into domain files, those duplicates will be copied into new sub-files. This is the correct moment to eliminate them — but if missed, the bug surface multiplies.
|
||||
|
||||
**Additionally:** If components are changed to import from sub-files directly (e.g. `import { listDocuments } from '../api/documents.js'`) instead of the barrel, every other component that imports from `client.js` still works — but a future refactor that renames a function in the sub-file will miss the barrel re-export and break components that still use the barrel. Both import paths exist simultaneously and diverge.
|
||||
|
||||
**Prevention:** Split in this order:
|
||||
1. Extract `request()` + `noRefreshPaths` into `api/core.js`. Export `request` from there.
|
||||
2. Extract the 401-retry pattern from the three blob-download functions into a single `fetchWithRetry(url, headers)` helper also in `api/core.js`.
|
||||
3. Create domain files (`api/documents.js`, `api/admin.js`, `api/auth.js`, etc.) that import from `api/core.js`.
|
||||
4. Keep `api/client.js` as a re-export barrel: `export * from './documents.js'; export * from './admin.js'` etc. This preserves all existing `import { listDocuments } from '../api/client.js'` calls without touching any component. Never change component imports to point at sub-files directly.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 6: Drag-and-Drop on DocumentCard — dragstart vs @click Conflict
|
||||
|
||||
**Phase:** UX improvements (drag-and-drop)
|
||||
|
||||
**What goes wrong:** `DocumentCard.vue` navigates on `@click="$router.push('/document/' + doc.id)"` (line 4). Browsers fire `click` after `dragend` when the drag distance is below the browser's drag-initiation threshold — typically ~4px. A user who clicks and releases without moving far enough triggers both `dragstart` and then `click`: the card navigates to the document even though the user intended to start a drag.
|
||||
|
||||
**Also:** The action buttons inside `DocumentCard` use `@click.stop`. If a drag handle overlaps an action button area, `@click.stop` prevents the click from propagating but does not prevent `dragstart` from bubbling — behavior becomes inconsistent depending on which pixel the user starts from.
|
||||
|
||||
**Note:** `StorageBrowser.vue` already implements drag-and-drop on list rows correctly (lines 141-145: `draggable`, `@dragstart`, `@dragend`) and does not have this problem because the row's `@click` emits `file-open` rather than navigating imperatively. The risk is specific to adding drag to `DocumentCard.vue` (card grid used in `TopicsView`).
|
||||
|
||||
**Prevention:**
|
||||
1. Track drag state with a component-level `dragging` ref. Set `dragging = true` in `@dragstart`, reset to `false` in `@dragend`. Guard `@click`: `if (this.dragging) return`.
|
||||
2. Preferred: use a dedicated drag handle element (grip icon, `cursor-grab`) and set `draggable="true"` only on that element. Add `@click.stop` on the handle. The rest of the card retains click-to-navigate.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 7: Virtual Scrolling — StorageBrowser DOM Assumptions Break
|
||||
|
||||
**Phase:** Frontend performance (virtual scrolling)
|
||||
|
||||
**What goes wrong:**
|
||||
The Vue 3 SPA stores the JWT access token in `localStorage`. Any JavaScript injected via XSS (in file names, document content previewed in the UI, a compromised dependency) can call `localStorage.getItem('token')` and exfiltrate a long-lived credential. The attacker then impersonates the user from any origin, bypasses TOTP entirely (the token is post-authentication), and can access all documents, including cloud storage credentials.
|
||||
|
||||
**Why it happens:**
|
||||
`localStorage` is the path of least resistance in SPAs. It survives page reloads, works with Axios interceptors trivially, and requires no server-side session state. FastAPI tutorials almost universally use `Authorization: Bearer` headers set from localStorage.
|
||||
`StorageBrowser.vue` renders its item list with `divide-y divide-gray-100` (line 76). The Tailwind `divide-y` utility inserts borders using adjacent-sibling CSS (`& > * + * { border-top-width: 1px }`). This only works when all children are present in the DOM simultaneously. Virtual scroll libraries keep only visible rows in the DOM — `divide-y` produces borders only between the visible subset, leaving gaps at virtual boundaries.
|
||||
|
||||
**How to avoid:**
|
||||
- Issue the JWT as an **httpOnly, SameSite=Strict, Secure cookie** — JavaScript cannot read it.
|
||||
- Use a short-lived access token (15 minutes) in the httpOnly cookie.
|
||||
- Issue a separate refresh token (httpOnly cookie, longer TTL, `/auth/refresh` path-scoped) to rotate access tokens silently.
|
||||
- The Vue frontend never holds the raw token string. Axios is configured with `withCredentials: true`; the browser attaches cookies automatically.
|
||||
- CSRF protection: because `SameSite=Strict` blocks cross-site cookie submission, CSRF tokens are not strictly required for same-origin SPAs, but add a CSRF header check (`X-Requested-With: XMLHttpRequest`) as defence-in-depth.
|
||||
The folder picker dropdown inside file rows (lines 185-213) is `absolute right-0 top-full` — positioned relative to its parent row. Virtual scroll repositions rows via `transform: translateY()`. Absolutely positioned children escape their transformed parent and appear at wrong viewport positions.
|
||||
|
||||
**Warning signs:**
|
||||
- `localStorage.getItem` anywhere in auth-related frontend code
|
||||
- JWT decode functions in frontend code (the frontend should not need to decode a token it can't read)
|
||||
- `Authorization: Bearer ${token}` header set manually in Axios interceptor
|
||||
CSS transitions on rows (`transition-all`, `transition-colors`) work with `v-for` because Vue animates DOM insertion/removal. Virtual scroll does not insert/remove — it repositions. Vue's `<transition-group>` cannot wrap a virtually scrolled list and will throw warnings.
|
||||
|
||||
**Phase to address:** Auth phase (Phase 1 — Users & Auth)
|
||||
**Prevention:**
|
||||
1. Replace `divide-y` with `border-b border-gray-100` on each individual row element. Rows become self-contained and do not depend on DOM adjacency.
|
||||
2. The folder picker dropdown must use `<Teleport to="body">` with `position: fixed` coordinates computed from `getBoundingClientRect()`. This is a prerequisite for virtual scroll adoption, not optional.
|
||||
3. Remove any `<transition-group>` wrapping a virtually scrolled list. Use per-row fade-in via a CSS class added on first mount instead.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 2: TOTP Bypass via Password Reset Flow
|
||||
|
||||
**What goes wrong:**
|
||||
The password reset flow issues a one-time token by email. After the user resets their password, the system logs them in and redirects to the dashboard — skipping the TOTP prompt because the session was created through the reset path, not the login path. An attacker who compromises a user's email account can therefore completely bypass TOTP.
|
||||
|
||||
**Why it happens:**
|
||||
Password reset and login are treated as separate code paths. The TOTP check lives in the login handler; the reset handler creates a session directly after credential update without going through the TOTP gate.
|
||||
|
||||
**How to avoid:**
|
||||
- After a successful password reset, issue a partial session or a `password_reset_pending` state, not a full authenticated session.
|
||||
- Force the user to complete the full login flow (including TOTP if enabled) from the new credentials.
|
||||
- Alternatively, on password reset completion, invalidate all existing sessions and send the user to the login page (no auto-login).
|
||||
- Log password resets in the audit trail with IP and user-agent.
|
||||
|
||||
**Warning signs:**
|
||||
- Password reset handler calls the same session-creation function as login but omits 2FA state checks
|
||||
- No `mfa_verified` flag on sessions (only `authenticated`)
|
||||
- Users can reach protected endpoints via a token created from the reset path
|
||||
|
||||
**Phase to address:** Auth phase (Phase 1 — Users & Auth)
|
||||
## Moderate Pitfalls
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 3: Refresh Token Rotation — Stolen Refresh Token Not Detected
|
||||
### Pitfall 8: Responsive Layout — w-64 Sidebar vs Flex-1 Content on Mobile
|
||||
|
||||
**What goes wrong:**
|
||||
Refresh tokens are issued as single-use rotating credentials. If an attacker steals a refresh token and uses it before the legitimate user does, the server rotates the token and the attacker has a valid new one. The legitimate user's next refresh request fails — but without a detection mechanism the failure just looks like a session expiry, no alert is raised, and the attacker continues with the stolen session indefinitely.
|
||||
**Phase:** Responsive / mobile layout
|
||||
|
||||
**Why it happens:**
|
||||
Teams implement the "rotate on use" mechanic without implementing the "revoke family on reuse" detection. The `refresh_tokens` table lacks a `family_id` column linking reissued tokens.
|
||||
**What goes wrong:** `App.vue` uses `flex h-screen overflow-hidden` with `AppSidebar` fixed at `w-64 shrink-0`. On screens narrower than ~320px the content area collapses below usable width. `StorageBrowser`'s 5-column grid `grid-cols-[2rem_1fr_6rem_8rem_6rem]` has `hidden sm:block` and `hidden md:block` to hide size and date columns — but the fixed `2rem` icon and `6rem` action columns still consume 128px on either side of the filename, leaving minimal space on a 375px screen.
|
||||
|
||||
**How to avoid:**
|
||||
- Store refresh tokens in the database with a `family_id` (UUID for the original issuance chain) and a `revoked` flag.
|
||||
- When a refresh token is presented: if it is already marked `revoked` (i.e., a previously rotated token), revoke the **entire family** — force logout of all sessions for that user.
|
||||
- Emit a security alert (audit log + optionally email) when a reuse attempt is detected.
|
||||
- Refresh tokens should be hashed before storage (bcrypt or SHA-256 with a per-row salt), same as passwords.
|
||||
|
||||
**Warning signs:**
|
||||
- Refresh tokens stored as plain values in DB with no `revoked` column
|
||||
- No `family_id` linking related rotation chains
|
||||
- Stolen refresh token detection treated as "v2 feature"
|
||||
|
||||
**Phase to address:** Auth phase (Phase 1 — Users & Auth)
|
||||
**Prevention:**
|
||||
1. On mobile (`< lg`), hide the sidebar. Use a hamburger button in a mobile-only header bar. Toggle with `translate-x-0 / -translate-x-full` transition on the sidebar element.
|
||||
2. The sidebar open/closed state needs to be in a Pinia store ref (or provided from `App.vue`) so the hamburger button in the header, the sidebar overlay, and the main content area all react to it. Do not put it in a component's `data()`.
|
||||
3. On mobile, simplify the grid to `grid-cols-[2rem_1fr_4rem]` — filename and a single action column. Test at 375px explicitly.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 4: TOTP — Timing Attack on Code Verification
|
||||
### Pitfall 9: Admin Panel + Responsive — Double Padding After Extracting Tab Content
|
||||
|
||||
**What goes wrong:**
|
||||
TOTP verification uses Python `==` string comparison. Python's `==` on strings is not constant-time — it short-circuits on the first differing character. A sufficiently sophisticated timing oracle (millions of requests from a local network) can distinguish valid from invalid codes, reducing the 6-digit brute-force space. More practically: without rate limiting, an attacker can brute-force all 1,000,000 possible 6-digit codes during a 30-second window.
|
||||
**Phase:** Admin panel rearchitecture + responsive layout (interaction pitfall)
|
||||
|
||||
**Why it happens:**
|
||||
TOTP libraries (PyOTP) return a string; developers do `if provided == expected`. Rate limiting is added "later" and often never lands.
|
||||
**What goes wrong:** `AdminView.vue` wraps all content in `p-8 max-w-5xl mx-auto`. Each tab component (`AdminUsersTab.vue`, `AdminQuotasTab.vue`, etc.) has its own internal padding. When tab components are extracted into standalone page views (`AdminUsersView.vue`, etc.), the `p-8 max-w-5xl mx-auto` wrapper moves to `AdminLayout.vue`. If the extracted page views retain their own inner padding, content is double-padded. If `AdminLayout` does not include the constraint, the new admin pages render full-bleed against the viewport.
|
||||
|
||||
**How to avoid:**
|
||||
- Use `hmac.compare_digest(provided, expected)` instead of `==` for TOTP comparison.
|
||||
- Rate-limit TOTP attempts: 5 attempts per 30-second window, 15-minute lockout on excess.
|
||||
- The lockout must be stored server-side (Redis or DB), not client-side.
|
||||
- Accept only the current window and optionally ±1 window for clock drift — do not accept wider ranges.
|
||||
- Log every failed TOTP attempt with IP.
|
||||
|
||||
**Warning signs:**
|
||||
- `if totp.verify(code):` without inspecting PyOTP's internal comparison method
|
||||
- No rate limit on `POST /auth/totp/verify`
|
||||
- TOTP window set to 2+ (default is ±1 window = 90 seconds valid — wider than needed)
|
||||
|
||||
**Phase to address:** Auth phase (Phase 1 — Users & Auth)
|
||||
**Prevention:** When extracting tab components into page views, strip all top-level padding and `max-w` from the extracted component — those belong to `AdminLayout`'s content area. The page components should fill 100% of the space provided by the layout slot.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 5: Path Traversal in User File Access (MinIO Object Keys)
|
||||
### Pitfall 10: Options API Refactoring — Prop Mutation via v-model
|
||||
|
||||
**What goes wrong:**
|
||||
MinIO object keys are constructed from user input: `f"users/{user_id}/{filename}"`. If `filename` contains `../`, `../../`, or URL-encoded equivalents (`%2e%2e%2f`), the resulting key may escape the user's prefix and land in another user's namespace. A request for `../../other_user_id/secret.pdf` resolves to `users/other_user_id/secret.pdf`.
|
||||
**Phase:** Frontend refactoring (Vue component decomposition)
|
||||
|
||||
**Why it happens:**
|
||||
Developers trust that MinIO will sanitize paths. It does not — S3-compatible APIs treat object keys as arbitrary strings. The prefix-based isolation is only as safe as the key construction code.
|
||||
**What goes wrong:** If a component receives a prop and binds it directly to `<input v-model="propName">`, Vue emits a prop mutation warning in development. In production (no warnings), the mutation silently fails to propagate: the component's displayed value updates (local vdom), but the parent never receives the change because no `update:propName` event was emitted.
|
||||
|
||||
**How to avoid:**
|
||||
- Never use raw filenames as object key components. Generate a UUID (or UUID + original extension) as the stored key: `f"users/{user_id}/{uuid4()}{ext}"`.
|
||||
- Store the human-readable filename in the database metadata row, completely decoupled from the storage key.
|
||||
- If filenames must appear in keys for any reason, strip or reject any `/`, `\`, `..`, `%` characters before key construction.
|
||||
- On retrieval, look up the object key from the database row (which is owned by `user_id`) rather than constructing it from user input.
|
||||
**Specific risk in this codebase:** `AdminUsersTab`, `AdminQuotasTab`, and `AuditLogTab` currently own their filter/search state internally. When extracted into standalone views, these may receive initial state from route query params and accidentally bind those props directly to inputs.
|
||||
|
||||
**Warning signs:**
|
||||
- `object_key = f"users/{user_id}/{request.filename}"`
|
||||
- File download endpoint accepts a `path` or `filename` query parameter and constructs the key from it
|
||||
- No database lookup intermediating between "user requests file" and "MinIO key used"
|
||||
|
||||
**Phase to address:** Storage migration phase (Phase 2 — DB + MinIO migration)
|
||||
**Prevention:** Any input the component controls must bind to a local `data()` copy initialized from the prop: `data() { return { localFilter: this.initialFilter } }`. Emit `update:initialFilter` on change. Never write `v-model="$props.X"`.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 6: Quota Race Condition — Concurrent Uploads Bypass the Limit
|
||||
### Pitfall 11: Options API Refactoring — data() vs computed() in Decomposed Components
|
||||
|
||||
**What goes wrong:**
|
||||
Two upload requests arrive simultaneously for a user at 99 MB of a 100 MB quota. Both read quota usage as 99 MB, both pass the `99 + 1 < 100` check, both proceed to upload — the user ends at 101 MB. At larger scale (many simultaneous large uploads) the overage can be significant.
|
||||
**Phase:** Frontend refactoring
|
||||
|
||||
**Why it happens:**
|
||||
Quota enforcement is implemented as: read current usage → check → write file → update usage. This is a classic check-then-act race when the check and the write are not atomic.
|
||||
**What goes wrong:** When extracting a large component, logic that was a `computed()` in the parent often gets copy-pasted into a child's `data()`. A `data()` value initializes once at mount — it does not react to prop changes. If the parent later passes a different prop value (e.g. the document list changes after a search), the child's stale `data()` copy never updates.
|
||||
|
||||
**How to avoid:**
|
||||
- Enforce quota atomically using a `SELECT ... FOR UPDATE` on the quota row before uploading, or use a PostgreSQL advisory lock keyed on `user_id`.
|
||||
- Better: use an optimistic update: `UPDATE quotas SET used_bytes = used_bytes + $new WHERE user_id = $uid AND used_bytes + $new <= limit_bytes RETURNING used_bytes`. If 0 rows are updated, the quota was exceeded — reject before touching MinIO.
|
||||
- Only update `used_bytes` after the MinIO upload succeeds, but hold the lock/reservation through the upload, or use a two-phase: reserve bytes → upload → confirm, with a cleanup job for stuck reservations.
|
||||
- Never read quota, do arithmetic in Python, then write back as two separate statements.
|
||||
|
||||
**Warning signs:**
|
||||
- `current = get_quota(user_id); if current + size <= limit: upload()`
|
||||
- No database transaction wrapping quota check and update
|
||||
- Quota table updated with `SET used_bytes = $computed_value` (full overwrite) rather than `used_bytes + delta`
|
||||
|
||||
**Phase to address:** Storage migration phase (Phase 2 — DB + MinIO migration) and Quotas phase
|
||||
**Prevention:** For every value in a newly created component, ask: "If the parent passes a different value for this prop, should the child update?" Yes → `computed()`. No → `data()`. Initialized from prop but locally modified afterward → `data()` with a `watch` on the prop to reset when it changes externally.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 7: Admin Privilege Escalation via Missing Ownership Checks
|
||||
### Pitfall 12: Keyboard Shortcuts — Conflict with Text Inputs and Browser Defaults
|
||||
|
||||
**What goes wrong:**
|
||||
An admin API endpoint is gated on `is_admin=True` but document-access endpoints only check `is_authenticated`. An admin user calling `GET /api/documents/{id}` with any document ID can read any user's document because the handler checks authentication but not `document.owner_id == current_user.id`. The privacy-first model is violated without any special exploit — just a correctly authenticated request.
|
||||
**Phase:** UX improvements (keyboard shortcuts)
|
||||
|
||||
**Why it happens:**
|
||||
Authorization is implemented as authentication + role checks ("is this user an admin?") without resource-level ownership verification ("does this user own this resource?"). FastAPI dependency injection makes it easy to write `current_user = Depends(get_current_user)` and forget to check `resource.user_id == current_user.id`.
|
||||
**What goes wrong:** A global `keydown` listener on `window` fires regardless of focused element. Shortcuts like `/` (focus search), `n` (new folder), `Delete` (delete selected) are also typed characters. They must not fire when any `<input>`, `<textarea>`, `<select>`, or `[contenteditable]` element has focus. `Escape` conflicts with native `<dialog>` cancel events if `DocumentPreviewModal` uses a native dialog — both fire, causing a double-close bug.
|
||||
|
||||
**How to avoid:**
|
||||
- Every document/file/folder endpoint must assert `resource.user_id == current_user.id` (or check share grants). This check cannot be optional or deferred.
|
||||
- Admins access user account metadata via separate admin-scoped endpoints that explicitly exclude document content, file URLs, and cloud credentials.
|
||||
- Write a test: log in as admin, attempt `GET /documents/{document_owned_by_other_user}`, assert `403`.
|
||||
- Use a centralized `assert_document_access(document, current_user)` function rather than inline checks to prevent omissions.
|
||||
**Prevention:**
|
||||
|
||||
**Warning signs:**
|
||||
- Document endpoints that check `if not current_user` but not `if document.user_id != current_user.id`
|
||||
- Admin endpoints that return document content or presigned URLs
|
||||
- No explicit tests for cross-user access attempts
|
||||
```javascript
|
||||
function onKeydown(e) {
|
||||
const tag = document.activeElement?.tagName
|
||||
const isEditing = ['INPUT', 'TEXTAREA', 'SELECT'].includes(tag)
|
||||
|| document.activeElement?.isContentEditable
|
||||
if (isEditing) return
|
||||
|
||||
**Phase to address:** Auth phase (Phase 1) and every subsequent phase that adds resource-access endpoints
|
||||
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
|
||||
e.preventDefault()
|
||||
searchInputRef.value?.focus()
|
||||
}
|
||||
}
|
||||
// Options API: register in mounted(), remove in beforeUnmount()
|
||||
// Omitting the removeEventListener is the most common bug in this pattern.
|
||||
```
|
||||
|
||||
Never call `preventDefault()` on `F5`, `Backspace`, `Ctrl+F`, or `Cmd+F` — these are browser-reserved. Use a Pinia store to track which shortcut context is active (file manager, document view, modal) so modal shortcuts suppress file manager shortcuts rather than both firing.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 8: Cloud Credential Leakage via Admin Query
|
||||
|
||||
**What goes wrong:**
|
||||
Cloud storage credentials (OAuth tokens, Nextcloud passwords) are encrypted at rest. But a query like `SELECT * FROM cloud_connections WHERE user_id = $uid` returns the ciphertext. If an admin dashboard endpoint runs this query and serializes the full row to JSON, the ciphertext ships to the admin browser. An admin cannot decrypt it without the key — but the ciphertext is now in browser history, proxy logs, and admin audit records. If the encryption key is later exposed, all credentials decrypt retroactively.
|
||||
|
||||
**Why it happens:**
|
||||
ORM models serialize all columns by default. Developers add `encrypted_credentials` to the model and forget to exclude it from admin-facing serializers.
|
||||
|
||||
**How to avoid:**
|
||||
- The `cloud_connections` table's credential column (`encrypted_token`, `encrypted_refresh_token`) must be **excluded** from all serialization by default.
|
||||
- Use explicit Pydantic response models for every endpoint — no `orm_mode` with full model pass-through.
|
||||
- Admin endpoints for cloud connections return only: `provider`, `account_label`, `connected_at`, `last_used_at`, `status` — never the credential column, not even ciphertext.
|
||||
- Audit log cloud credential access separately: the only code path that should ever read the encrypted column is the storage adapter, not admin or user-info endpoints.
|
||||
|
||||
**Warning signs:**
|
||||
- `CloudConnection` Pydantic schema includes `encrypted_token` field
|
||||
- Admin user-detail endpoint returns full cloud connection rows
|
||||
- ORM model uses `model_config = ConfigDict(from_attributes=True)` without explicit field exclusions
|
||||
|
||||
**Phase to address:** Cloud storage integration phase (Phase 3 or 4)
|
||||
## Minor Pitfalls
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 9: Flat-file to PostgreSQL Migration — Data Loss During Cutover
|
||||
### Pitfall 13: Loading Skeletons — Count Mismatch Causes Layout Shift
|
||||
|
||||
**What goes wrong:**
|
||||
The migration script reads all JSON files, transforms them to DB rows, and then a flag switches the app to use PostgreSQL. Documents uploaded during the migration window are written to the old JSON store (because the flag has not flipped yet) and are missed by the migration script, which ran before they arrived. After cutover, those documents are invisible.
|
||||
**Phase:** UX improvements (loading skeletons)
|
||||
|
||||
**Why it happens:**
|
||||
Migrations are planned as offline events ("we'll take the app down for 5 minutes") and then discovered to be impractical — the app is used 24/7 or downtime feels risky. The team runs the migration online without dual-write.
|
||||
**What goes wrong:** `StorageBrowser.vue` already has a `loading` prop (line 244) that shows "Loading…" text. Replacing this with skeleton rows requires a skeleton count. Hardcoding 5 rows when `per_page=20` causes a jump; using `per_page` as the skeleton count when only 3 items exist also jars. If skeleton rows are different heights from actual rows, the layout shifts when real content loads — this is a Core Web Vitals issue.
|
||||
|
||||
**How to avoid:**
|
||||
- Plan the migration in three phases:
|
||||
1. **Dual-write**: deploy code that writes to both JSON and PostgreSQL, reads from JSON. All new documents land in both stores.
|
||||
2. **Backfill**: run migration script to copy historical JSON records to PostgreSQL. New records are already there.
|
||||
3. **Cutover**: flip read source to PostgreSQL, verify counts match, remove JSON write path.
|
||||
- The dual-write window can be as short as one deployment cycle.
|
||||
- Include a reconciliation check: `assert doc_count_json == doc_count_db` before cutting over.
|
||||
- Keep the old JSON store read-only for 1 week post-cutover as a rollback option.
|
||||
|
||||
**Warning signs:**
|
||||
- Migration is planned as "take app down, run script, bring back up"
|
||||
- No count-reconciliation step
|
||||
- No rollback plan documented before migration begins
|
||||
|
||||
**Phase to address:** DB + MinIO migration phase (Phase 2)
|
||||
**Prevention:** Render skeletons at the previous page's actual item count (stored in the parent store). Default to 6-8 on first load. Skeleton rows must match the height of `StorageBrowser`'s actual grid rows exactly — use the same `px-4 py-2.5 grid-cols-[2rem_1fr_6rem_8rem_6rem]` structure with gray placeholder blocks.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 10: Blocking I/O Inside Async FastAPI Handlers (Existing Issue)
|
||||
### Pitfall 14: Tailwind Purging — Dynamic Class Names in Refactored Components
|
||||
|
||||
**What goes wrong:**
|
||||
The codebase already uses synchronous `filelock` and `open()` inside `async def` handlers (CONCERNS.md item 6). After migration to PostgreSQL + MinIO, if synchronous DB drivers (psycopg2) or synchronous MinIO client calls replace the file I/O without wrapping in `asyncio.to_thread()`, the event loop stalls on every I/O operation. Under concurrent load (multiple users uploading), requests queue behind each other even though the hardware is idle.
|
||||
**Phase:** Visual redesign (Tailwind component system)
|
||||
|
||||
**Why it happens:**
|
||||
SQLAlchemy sync engine + psycopg2 is the default FastAPI tutorial stack. The MinIO Python SDK (`minio` package) is synchronous. Developers add `await` in front of calls that are not coroutines, get a type error, remove the `await`, and ship blocking code.
|
||||
**What goes wrong:** Vite + Tailwind purges unused CSS at build time by scanning template strings for class names. Dynamic class names constructed at runtime (e.g. `'text-' + color + '-500'`) are invisible to the purger. In development all classes are present; in production the dynamic classes are stripped and topics/provider badges render without color.
|
||||
|
||||
**How to avoid:**
|
||||
- Use SQLAlchemy async engine with `asyncpg` driver: `create_async_engine("postgresql+asyncpg://...")`.
|
||||
- Wrap all MinIO SDK calls in `asyncio.to_thread()` since there is no official async MinIO client: `await asyncio.to_thread(minio_client.put_object, ...)`.
|
||||
- Alternatively use `aioboto3` (async boto3) which works with MinIO's S3-compatible API.
|
||||
- `aiofiles` is already in `requirements.txt` — use it for any remaining local file operations.
|
||||
- Run `pytest-asyncio` + `asyncio.get_event_loop().set_debug(True)` in tests; the debug mode logs blocking calls.
|
||||
**Specific risk:** `formatters.js` functions `providerColor`, `providerBg`, `providerLabel` return class strings. If those strings are not present as complete literals anywhere in the scanned source, they are purged.
|
||||
|
||||
**Warning signs:**
|
||||
- `from sqlalchemy import create_engine` (not `create_async_engine`)
|
||||
- `import psycopg2` anywhere in application code
|
||||
- `minio_client.put_object(...)` not wrapped in `asyncio.to_thread`
|
||||
- Uvicorn logs show high request latency even with low CPU usage
|
||||
|
||||
**Phase to address:** DB + MinIO migration phase (Phase 2)
|
||||
**Prevention:** Add a `safelist` in `tailwind.config.js`:
|
||||
```javascript
|
||||
safelist: [
|
||||
{ pattern: /bg-(blue|green|purple|orange|gray|indigo|red)-(50|100|500|600)/ },
|
||||
{ pattern: /text-(blue|green|purple|orange|gray|indigo|red)-(500|600|700)/ },
|
||||
]
|
||||
```
|
||||
Alternatively, use a lookup object of complete class strings rather than string concatenation — Tailwind can scan complete strings in object literals.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 11: N+1 Queries on Document Listing
|
||||
|
||||
**What goes wrong:**
|
||||
`GET /api/documents` returns a list of documents, each including folder name, topic names, and share count. The handler fetches the document list, then for each document issues separate queries for folder, topics, and shares. 100 documents = 301+ queries per page load. The existing codebase already has an O(N) disk scan equivalent (CONCERNS.md items 8, 9); the PostgreSQL migration preserves this pattern if not corrected.
|
||||
|
||||
**Why it happens:**
|
||||
SQLAlchemy lazy loading is the default. `document.folder.name` triggers a query. Developers don't see it until production load hits.
|
||||
|
||||
**How to avoid:**
|
||||
- Use SQLAlchemy `joinedload` or `selectinload` options on the document list query to eagerly load related entities.
|
||||
- The list endpoint should be a single SQL query with JOINs, not a loop.
|
||||
- Add `EXPLAIN ANALYZE` checks as part of the phase acceptance criteria.
|
||||
- Enable SQLAlchemy `echo=True` in development to log every SQL statement.
|
||||
- Pagination at the database level: `LIMIT 50 OFFSET $n` — not "fetch all, slice in Python."
|
||||
|
||||
**Warning signs:**
|
||||
- SQLAlchemy models using default relationship loading without explicit `lazy=` options
|
||||
- `for doc in documents: doc.folder.name` pattern
|
||||
- No `joinedload` or `selectinload` in list query definitions
|
||||
- Query count in tests grows linearly with fixture size
|
||||
|
||||
**Phase to address:** DB + MinIO migration phase (Phase 2); enforce in document listing feature phase
|
||||
## Integration Pitfalls (Where Two Changes Interact Badly)
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 12: MinIO Presigned URL Expiry — Stale Links in the UI
|
||||
### Integration Pitfall A: Admin Rearchitecture + client.js Splitting — Wrong Order Causes Test Blindness
|
||||
|
||||
**What goes wrong:**
|
||||
The document preview and download UI displays links generated as MinIO presigned URLs with a 1-hour expiry. The Vue frontend fetches the document list on page load, stores the URLs in Pinia state, and renders them as `<img src>` or `<a href>`. If the user leaves the tab open for 2 hours and then clicks a link, they get a 403 (presigned URL expired). No error is shown; the image just fails to load or the download silently fails.
|
||||
**Phases:** Admin panel rearchitecture + frontend refactoring
|
||||
|
||||
**Why it happens:**
|
||||
Presigned URLs feel like permanent links. Teams generate them at list time for convenience and cache them in frontend state without expiry awareness.
|
||||
**What goes wrong:** If `client.js` is split into domain sub-files before the admin routes are moved to `/admin/*`, the new `api/admin.js` sub-file gets created. Components are then updated to point at the new route structure. But if the split happened first and components were simultaneously moved to import from `api/admin.js` directly (bypassing the barrel), the existing tests (which mock `client.js` imports) no longer cover the new import path. Tests pass, bugs hide.
|
||||
|
||||
**How to avoid:**
|
||||
- Do not embed presigned URLs in list responses. Return only document metadata.
|
||||
- Generate presigned URLs **on demand**: a separate `GET /api/documents/{id}/download-url` endpoint generates a short-lived URL (5–15 minutes) at the moment of user intent.
|
||||
- Alternatively, proxy document bytes through the FastAPI backend (`GET /api/documents/{id}/file` streams from MinIO) — eliminates presigned URL complexity at the cost of bandwidth.
|
||||
- If presigned URLs are cached in frontend state, include the expiry timestamp and regenerate before expiry.
|
||||
|
||||
**Warning signs:**
|
||||
- Presigned URLs included in document list response JSON
|
||||
- Frontend stores presigned URLs in Pinia state without TTL tracking
|
||||
- No `GET /api/documents/{id}/download-url` endpoint (or equivalent)
|
||||
- `presigned_url_expiry = 3600` with no frontend refresh logic
|
||||
|
||||
**Phase to address:** DB + MinIO migration phase (Phase 2) and document access phase
|
||||
**Prevention:** Split `client.js` using the re-export barrel pattern first. Verify all existing tests still pass against the barrel. Then rearchitect admin routes. The barrel acts as a compatibility shim throughout both phases. Only remove the barrel after all tests are updated to import from sub-files.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 13: OAuth Token for Cloud Storage — Revocation Not Handled
|
||||
### Integration Pitfall B: Virtual Scrolling + Drag-and-Drop Cannot Be Added Simultaneously
|
||||
|
||||
**What goes wrong:**
|
||||
A user connects Google Drive via OAuth. The app stores the encrypted access token + refresh token. Six months later, the user revokes the app's access in their Google account settings. The next time DocuVault tries to access their Drive, it gets a 401. The refresh token exchange also fails with `invalid_grant`. The app has no handler for this — it retries, logs an error, and the user sees a generic "storage error" with no path to reconnect.
|
||||
**Phases:** Frontend performance + UX improvements
|
||||
|
||||
**Why it happens:**
|
||||
OAuth happy-path is well-documented. Revocation and `invalid_grant` handling are in footnotes. Teams handle 401 → refresh → retry but don't handle refresh failure → user notification.
|
||||
**What goes wrong:** Virtual scroll and HTML5 drag-and-drop between rows both depend on the same DOM elements. Virtual scroll keeps only visible rows in the DOM. A user dragging a file toward a folder that is currently scrolled out of the virtual window will never trigger `dragover` on that folder row — it is not in the DOM. `StorageBrowser.vue`'s existing drag-into-folder implementation (lines 88-90) relies on `@dragover.prevent` on folder rows. In a virtual list, off-screen folder rows do not receive this event.
|
||||
|
||||
**How to avoid:**
|
||||
- Wrap all cloud storage adapter calls in a two-level error handler:
|
||||
- Level 1: 401 → attempt refresh → retry.
|
||||
- Level 2: refresh fails with `invalid_grant` or `token_revoked` → mark connection as `REQUIRES_REAUTH` in DB, **do not retry**, surface a "reconnect required" notice to the user.
|
||||
- The `cloud_connections` table must have a `status` column: `ACTIVE | REQUIRES_REAUTH | ERROR`.
|
||||
- The UI must poll or react to `REQUIRES_REAUTH` state and prompt the user to re-authorize, not just show an error toast.
|
||||
- Never silently swallow a revoked-token error or retry indefinitely.
|
||||
|
||||
**Warning signs:**
|
||||
- Cloud storage adapter raises generic `StorageError` for all OAuth errors without distinguishing revocation
|
||||
- No `status` or `needs_reauth` column on `cloud_connections`
|
||||
- Reconnect UI not planned in feature scope
|
||||
|
||||
**Phase to address:** Cloud storage integration phase
|
||||
**Prevention:** Decide the list interaction model before implementing either feature. If virtual scrolling is added, redesign drag-to-folder: the sidebar folder tree (always fully rendered, outside the virtual list) becomes the drop target. This is a UX design decision that must be made before either feature is implemented, not a detail to resolve mid-phase.
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 14: Cloud Storage Rate Limits — No Backoff, No Per-User Throttling
|
||||
### Integration Pitfall C: Responsive Sidebar + Admin Guard Race on Mobile Page Load
|
||||
|
||||
**What goes wrong:**
|
||||
Multiple users with Google Drive connected trigger simultaneous document uploads. The app hits Google's per-app rate limit (Drive API: 20,000 requests/100 seconds/user, but also global per-project limits). Google returns 429. The app has no retry-with-backoff; uploads fail and the errors are attributed to the individual user, not the platform-level limit.
|
||||
**Phases:** Responsive layout + admin panel rearchitecture
|
||||
|
||||
**Why it happens:**
|
||||
Rate limits are per-API-key, not per-user. A single misbehaving user or burst of activity for all users shares the same quota. Teams only test with a single user.
|
||||
**What goes wrong:** The current `beforeEach` guard correctly awaits `authStore.refresh()` before checking `authStore.user?.role` (router lines 82-88). This is correct. The risk emerges when adding nested admin child routes: a developer adding a component-level `created()` or `onMounted()` auth check in an admin page component, trying to guard against unauthorized access "just in case." If that component check does not await the refresh (because the token is memory-only and gone on mobile page reload), `authStore.user` is null at that point, the component check redirects the user to `/login`, and the correct guard never gets to run. The result is that admins are bounced to login on every mobile page reload.
|
||||
|
||||
**How to avoid:**
|
||||
- Implement exponential backoff with jitter for all cloud storage adapter calls (start 1s, max 32s, 3 retries).
|
||||
- Use a task queue (Celery or FastAPI BackgroundTasks with a semaphore) for cloud-destined uploads rather than processing inline in the request handler.
|
||||
- Log 429 responses separately from other errors — they indicate platform-level throttling, not user errors.
|
||||
- Per-provider rate limit documentation should be captured in adapter docstrings.
|
||||
|
||||
**Warning signs:**
|
||||
- Cloud upload performed synchronously inside the HTTP request handler with no retry logic
|
||||
- No `tenacity` or equivalent retry decorator on provider calls
|
||||
- 429 responses from cloud APIs cause 500 responses to the end user
|
||||
|
||||
**Phase to address:** Cloud storage integration phase
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 15: GDPR Right to Erasure — Cloud Copies Not Deleted
|
||||
|
||||
**What goes wrong:**
|
||||
A user requests account deletion. The app deletes the PostgreSQL rows, the MinIO objects, and the user record. But if the user's documents were stored in Google Drive or OneDrive via the cloud storage adapter, those files remain on the cloud provider. The user's data has not actually been erased from all systems.
|
||||
|
||||
**Why it happens:**
|
||||
Account deletion is implemented against the systems the team controls (PostgreSQL, MinIO). Cloud storage is treated as "the user's own storage" so deletion is skipped. Under GDPR, if the platform wrote files to the user's cloud storage on their behalf as a data processor, erasure obligations may extend there.
|
||||
|
||||
**How to avoid:**
|
||||
- Account deletion must enumerate all `cloud_connections` for the user and call `adapter.delete_all_user_files()` (or equivalent) on each active connection.
|
||||
- If the cloud connection is already in `REQUIRES_REAUTH` state, the deletion cannot proceed automatically — log a compliance alert and require manual follow-up or notify the user to delete manually.
|
||||
- Document the data flow in a data map: "files stored in X go to Y" — this is a GDPR Article 30 requirement.
|
||||
- Right to erasure flow must be tested as part of acceptance criteria, not assumed to work.
|
||||
|
||||
**Warning signs:**
|
||||
- Account deletion handler only operates on PostgreSQL and MinIO
|
||||
- No `delete_user_files` method in the `StorageBackend` interface
|
||||
- No GDPR data map in project documentation
|
||||
|
||||
**Phase to address:** Cloud storage integration phase and account management phase
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 16: Encryption Key Management — Single Key for All Users
|
||||
|
||||
**What goes wrong:**
|
||||
All cloud credentials are encrypted with one Fernet key stored in `CLOUD_ENCRYPTION_KEY` env var. If this key is exposed (leaked `.env`, compromised deployment config, insider threat), every user's cloud credentials decrypt at once. The privacy-first model collapses entirely.
|
||||
|
||||
**Why it happens:**
|
||||
One key is simpler than per-user keys. Fernet key derivation per user is slightly more complex to implement.
|
||||
|
||||
**How to avoid:**
|
||||
- Derive a per-user encryption key from the master key + a user-specific salt: `HKDF(master_key, salt=user_id_bytes, info=b"cloud-credentials")`. The salt is stored in the users table.
|
||||
- Even if the master key leaks, an attacker still needs each user's salt to decrypt their credentials.
|
||||
- Rotate the master key on a schedule: re-encrypt all stored credentials with the new key in a background job.
|
||||
- Audit log any code path that accesses the encryption key — this should only ever happen in the storage adapter, never in API handlers.
|
||||
- Never log the encryption key or derived key material, even at DEBUG level.
|
||||
|
||||
**Warning signs:**
|
||||
- Single `ENCRYPTION_KEY` env var with no per-user derivation
|
||||
- Encryption/decryption called directly in API endpoint handlers (not in the adapter layer)
|
||||
- No key rotation plan documented
|
||||
|
||||
**Phase to address:** Cloud storage integration phase (design the key derivation before writing the first line of credential storage code)
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 17: Shared Document — Quota Not Charged to Sharer Correctly After Revoke
|
||||
|
||||
**What goes wrong:**
|
||||
User A shares a document with User B. The document is not duplicated — it stays in User A's storage and User A's quota. User A revokes the share. If the quota update on revoke has a bug (or is missing), User A's used bytes may drift from reality over time. At scale, quota inaccuracies accumulate and users can either be locked out prematurely or exceed limits invisibly.
|
||||
|
||||
**Why it happens:**
|
||||
Sharing is implemented as a metadata-only operation (a `shares` table row), but quota accounting is only re-examined on upload and delete. Edge cases (revoke, owner deletion while share is active, cloud storage document quota) are skipped.
|
||||
|
||||
**How to avoid:**
|
||||
- Quota is a property of documents, not shares. Ensure the quota model is: "sum of `file_size` for all documents where `owner_id = user_id`." Shares do not affect quota calculation.
|
||||
- Recalculate quota from source-of-truth (a `SUM` query) as a periodic background job and reconcile against the cached `used_bytes` value. Alert if drift exceeds 1%.
|
||||
- The `DELETE /documents/{id}` handler must atomically decrement quota and delete the DB row and MinIO object in a single transaction (DB) + best-effort cleanup (MinIO).
|
||||
|
||||
**Warning signs:**
|
||||
- `used_bytes` stored as a counter updated by application code, never reconciled against a database SUM
|
||||
- Share revocation handler doesn't touch quota (correct if quota is owner-only, but must be verified)
|
||||
- Document deletion does not atomically update quota
|
||||
|
||||
**Phase to address:** Quotas and sharing phases
|
||||
|
||||
---
|
||||
|
||||
## Technical Debt Patterns
|
||||
|
||||
| Shortcut | Immediate Benefit | Long-term Cost | When Acceptable |
|
||||
|----------|-------------------|----------------|-----------------|
|
||||
| Single global encryption key for cloud credentials | Simple env var config | Single point of failure; one leak decrypts all users | Never for a SaaS product |
|
||||
| localStorage JWT storage | Easy Axios integration | XSS → full account takeover, TOTP bypass | Never; httpOnly cookies have identical DX once set up |
|
||||
| Synchronous DB driver (psycopg2) with FastAPI | Familiar, simple | Event loop blocking under any load | Never for new greenfield code; acceptable only during an explicitly time-boxed spike |
|
||||
| Presigned URL in list response | One fewer endpoint | Stale URLs, user-facing failures after expiry | Only for short-lived signed URLs (<5 min) with TTL tracking in frontend |
|
||||
| Skip per-user key derivation | Fewer moving parts | Catastrophic blast radius on key leak | Never for cloud credential encryption |
|
||||
| Inline quota check (read-check-write) without atomic update | Simple code | Silent quota bypass under concurrent load | Never for enforced limits |
|
||||
| Soft-coding 8-char UUID prefix as document IDs (existing) | Shorter IDs | Collision risk at scale; insecure for auth tokens | Replace with full UUID before multi-user goes live |
|
||||
|
||||
---
|
||||
|
||||
## Integration Gotchas
|
||||
|
||||
| Integration | Common Mistake | Correct Approach |
|
||||
|-------------|----------------|------------------|
|
||||
| Google Drive OAuth | Storing `access_token` only; ignoring `refresh_token` | Store both; refresh_token is issued only on first authorization — store immediately or it's lost |
|
||||
| OneDrive / MSAL | Treating MSAL token cache as permanent | MSAL token cache can be invalidated by Microsoft; always handle `invalid_grant` and re-auth prompt |
|
||||
| Nextcloud | Using Basic Auth with plain credentials | Use App Passwords (Nextcloud-specific token), never store the user's Nextcloud master password |
|
||||
| MinIO | Using `minio.get_object()` for large files without streaming | Stream the response: `response.stream(32768)` or use boto3 streaming; loading full file to memory crashes on large PDFs |
|
||||
| MinIO | Treating bucket names as security boundaries | Bucket names are not credentials; isolation is enforced by object key prefix + IAM policy. Set MinIO IAM so the app's service account can only access the designated bucket |
|
||||
| PostgreSQL | Using `autocommit=True` for all connections | Quota updates and document record creation must be transactional; autocommit makes rollback impossible |
|
||||
| PyOTP (TOTP) | Using default `valid_window=0` then switching to `valid_window=2` for "user convenience" | Window=1 (±30s) tolerates clock skew. Window=2+ increases brute-force surface disproportionately |
|
||||
|
||||
---
|
||||
|
||||
## Performance Traps
|
||||
|
||||
| Trap | Symptoms | Prevention | When It Breaks |
|
||||
|------|----------|------------|----------------|
|
||||
| O(N) metadata scan on every document list (existing pattern) | List endpoint slows linearly with document count | Paginated SQL query with index on `(user_id, created_at)` | ~500 documents per user |
|
||||
| Topic count scan on every topic fetch (existing pattern) | `GET /topics` latency spikes as documents grow | Materialized counter column updated on insert/delete, or cached with 30s TTL | ~1,000 documents |
|
||||
| Synchronous MinIO upload inline in HTTP handler | Requests time out on large files; one upload blocks all other requests | Background task queue; return 202 Accepted with job ID | First user uploading a file >10 MB |
|
||||
| Eager loading all cloud connections on user login | Login latency grows with number of connected providers | Lazy-load cloud connection status; only check on storage page | >3 cloud providers per user |
|
||||
| Full-text search via `ILIKE '%term%'` on document content | Full table scan on every search | PostgreSQL `tsvector` full-text index on extracted text column | ~10,000 documents platform-wide |
|
||||
| JWT validation on every request without caching public key | Repeated public key fetch (if using asymmetric JWT) | Cache the signing key in memory; never refetch on every request | High request volume |
|
||||
|
||||
---
|
||||
|
||||
## Security Mistakes
|
||||
|
||||
| Mistake | Risk | Prevention |
|
||||
|---------|------|------------|
|
||||
| CORS `allow_origins=["*"]` retained from existing codebase | Cross-origin requests from attacker-controlled pages | Set exact origin (frontend URL) in production; never wildcard with credentials |
|
||||
| File type validation defined but not enforced (existing) | Executable or malicious file uploads | Enforce MIME type check at upload boundary; also validate magic bytes (not just Content-Type header) |
|
||||
| No file size limit at HTTP boundary (existing) | Memory exhaustion, DoS via large upload | Add `max_upload_bytes` limit in FastAPI middleware before reading body |
|
||||
| API keys in plaintext JSON (existing) | Credential leakage via Docker volume mount | Env vars for all secrets; never serialize keys to disk in application data directory |
|
||||
| Password reset without invalidating existing sessions | Attacker keeps session after victim resets password | Invalidate all sessions for user on successful password reset |
|
||||
| Audit log includes document metadata (filenames) | Filename can reveal document content | Audit log stores only document ID, event type, timestamp, IP — no filenames |
|
||||
| Admin can read `cloud_connections.encrypted_token` column | Ciphertext exposure; retroactive decryption if key leaks | Exclude credential columns from all admin serializers by policy |
|
||||
| No breach check on registration password | Users reuse passwords from breached services | Integrate HIBP k-anonymity API on registration |
|
||||
|
||||
---
|
||||
|
||||
## UX Pitfalls
|
||||
|
||||
| Pitfall | User Impact | Better Approach |
|
||||
|---------|-------------|-----------------|
|
||||
| Silent presigned URL expiry (image fails to load, download does nothing) | User thinks the app is broken; no recovery path | On-demand URL generation; show explicit "link expired, regenerating..." state |
|
||||
| TOTP enrollment without backup codes | User loses phone → permanently locked out of account | Issue 8–10 single-use backup codes at TOTP enrollment; require user to acknowledge |
|
||||
| Quota error shown only as "Upload failed" | User doesn't know why; may try repeatedly | Return structured quota error: `{"error": "quota_exceeded", "used": 98MB, "limit": 100MB}` |
|
||||
| Cloud storage reconnect required, but no in-app prompt | User's uploads silently fail until they notice the settings page | Banner notification or upload-time prompt: "Your Google Drive connection needs re-authorization" |
|
||||
| Folder delete with documents inside silently deletes documents | Data loss without confirmation | Require explicit confirmation listing document count; offer "move to root" alternative |
|
||||
| Share revoke with no notification to recipient | Recipient sees documents disappear without explanation | Audit-trail entry visible to recipient: "Access to [folder] was revoked by [owner]" |
|
||||
|
||||
---
|
||||
|
||||
## "Looks Done But Isn't" Checklist
|
||||
|
||||
- [ ] **TOTP enrollment:** Backup codes issued, stored hashed, and acknowledged by user before TOTP is marked active
|
||||
- [ ] **Password reset:** Does NOT create a full authenticated session — routes through login with TOTP check
|
||||
- [ ] **Document delete:** Atomically decrements quota AND removes MinIO object AND removes DB row in a single transaction
|
||||
- [ ] **Account delete:** Deletes from MinIO, PostgreSQL, AND calls `adapter.delete_user_files()` for each cloud connection
|
||||
- [ ] **Cloud disconnect:** Revokes OAuth token at provider (not just deletes local record) — provider refresh tokens remain valid until explicitly revoked
|
||||
- [ ] **Quota display:** Shows real-time usage, not cached value from registration — must query SUM from DB
|
||||
- [ ] **Sharing:** Shared documents do NOT copy to recipient's quota — verify with a `SELECT SUM(file_size) WHERE owner_id = recipient_id` before and after share
|
||||
- [ ] **Migration:** Document count in PostgreSQL equals document count in old JSON store before cutover flag is flipped
|
||||
- [ ] **Presigned URLs:** Never in list responses — verified by API contract test asserting no `url` field in list endpoint response body
|
||||
- [ ] **Admin isolation:** Admin token cannot retrieve document content — verified by dedicated negative-access test
|
||||
|
||||
---
|
||||
|
||||
## Recovery Strategies
|
||||
|
||||
| Pitfall | Recovery Cost | Recovery Steps |
|
||||
|---------|---------------|----------------|
|
||||
| JWT in localStorage discovered post-launch | HIGH | Rotate all tokens (force logout all users), redeploy with httpOnly cookies, communicate to users |
|
||||
| Quota race condition caused 10% of users to exceed quota | MEDIUM | Run `UPDATE quotas SET used_bytes = (SELECT SUM(file_size) FROM documents WHERE owner_id = user_id)` reconciliation; enforce atomic updates going forward |
|
||||
| Flat-file migration data loss (documents missing post-cutover) | HIGH | Restore from pre-migration backup of JSON data directory; re-run migration with dual-write; reconcile counts |
|
||||
| Encryption key leaked (single-key model) | CRITICAL | Immediately rotate key; re-encrypt all credentials with new key; notify affected users; assume all cloud credentials compromised — prompt all users to revoke and reconnect |
|
||||
| Admin escalation (admin accessed user documents) | HIGH | Audit log review to determine scope; GDPR breach notification if EU users affected (72h window); patch authorization layer; force session invalidation |
|
||||
| Cloud connection revoked but app retried indefinitely | LOW | Mark all stuck connections as `REQUIRES_REAUTH`; send user notification; add `invalid_grant` handler to adapter |
|
||||
|
||||
---
|
||||
|
||||
## Pitfall-to-Phase Mapping
|
||||
|
||||
| Pitfall | Prevention Phase | Verification |
|
||||
|---------|------------------|--------------|
|
||||
| JWT in localStorage | Phase 1 — Auth | Confirm no `localStorage.setItem('token', ...)` in frontend; auth cookie is httpOnly in browser DevTools |
|
||||
| TOTP bypass via password reset | Phase 1 — Auth | Integration test: reset password → assert no full session created → assert login still requires TOTP |
|
||||
| Refresh token reuse detection | Phase 1 — Auth | Test: use a rotated (old) refresh token → assert 401 and full family revocation |
|
||||
| TOTP timing attack / brute force | Phase 1 — Auth | Rate limit test: 6th TOTP attempt within window → assert 429 |
|
||||
| Path traversal in MinIO keys | Phase 2 — DB + MinIO migration | Unit test: filename with `../` → assert stored key is UUID-based, not user-provided |
|
||||
| Quota race condition | Phase 2 — DB + MinIO migration | Concurrent upload test: 2 threads uploading to full quota → assert only one succeeds |
|
||||
| Admin privilege escalation | Phase 1 + every phase adding resource endpoints | Negative access test: admin JWT → `GET /documents/{other_user_doc_id}` → assert 403 |
|
||||
| Cloud credential leakage via admin query | Phase 3 — Cloud storage | Test: admin list user cloud connections → assert response contains no `token` or `encrypted_` fields |
|
||||
| Flat-file to PostgreSQL data loss | Phase 2 — DB + MinIO migration | Count reconciliation: `assert json_doc_count == db_doc_count` in migration script |
|
||||
| Blocking I/O in async handlers | Phase 2 — DB + MinIO migration | Load test with 10 concurrent requests; assert no event loop warnings; check SQLAlchemy driver is asyncpg |
|
||||
| N+1 queries on document list | Phase 2 — DB + MinIO migration | Enable SQLAlchemy echo; assert document list query count = 1 regardless of result size |
|
||||
| Presigned URL expiry | Phase 2 — DB + MinIO migration | API contract test: list endpoint response contains no presigned URL fields |
|
||||
| OAuth revocation not handled | Phase 3 — Cloud storage | Mock `invalid_grant` from OAuth provider → assert connection status set to `REQUIRES_REAUTH`, not retried |
|
||||
| Rate limits without backoff | Phase 3 — Cloud storage | Mock 429 from provider → assert exponential backoff, not immediate 500 to user |
|
||||
| GDPR right to erasure incomplete | Phase 3 — Cloud storage + account mgmt | Account deletion test: assert cloud adapter `delete_user_files` called for each active connection |
|
||||
| Single encryption key | Phase 3 — Cloud storage | Code review gate: assert per-user HKDF derivation; no single-key decryption in any code path |
|
||||
| Quota drift from sharing/revoke | Sharing phase | Reconciliation query: `SUM(file_size WHERE owner_id = user)` vs `used_bytes` — assert < 1% drift |
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- Project context: `/Users/nik/Documents/Progamming/document_scanner/.planning/PROJECT.md`
|
||||
- Codebase audit: `/Users/nik/Documents/Progamming/document_scanner/.planning/codebase/CONCERNS.md`
|
||||
- Auth pitfalls: OWASP JWT Security Cheat Sheet, OWASP Authentication Cheat Sheet (well-established, HIGH confidence)
|
||||
- OAuth token lifecycle: RFC 6749 Section 10.4 (refresh token revocation), Google OAuth error codes documentation (HIGH confidence from training data)
|
||||
- MinIO/S3 path traversal: AWS S3 object key documentation; known class of vulnerability in multi-tenant S3-prefix isolation (HIGH confidence)
|
||||
- Quota race conditions: Classic check-then-act concurrency pattern; PostgreSQL SELECT FOR UPDATE documentation (HIGH confidence)
|
||||
- GDPR Article 17 (right to erasure) and Article 30 (records of processing): well-established regulatory requirements (HIGH confidence)
|
||||
- N+1 query pattern: SQLAlchemy documentation on relationship loading strategies (HIGH confidence)
|
||||
- TOTP RFC 6238; PyOTP library behavior from training data (MEDIUM — verify PyOTP `valid_window` defaults against current docs before implementation)
|
||||
|
||||
---
|
||||
|
||||
*Pitfalls research for: DocuVault — multi-user SaaS document management (FastAPI + Vue 3 + PostgreSQL + MinIO)*
|
||||
*Researched: 2026-05-21*
|
||||
**Prevention:** The single `beforeEach` guard is the only place that should call `refresh()` or check roles. Page components must not independently re-check auth. If a component needs the current user, it reads from `authStore.user` — which is guaranteed to be populated by the time the component mounts, because the guard has already awaited the refresh.
|
||||
|
||||
+239
-470
@@ -1,553 +1,322 @@
|
||||
# Stack Research — DocuVault: Multi-User Auth, Storage & Cloud Integrations
|
||||
# Technology Stack — DocuVault v0.2: UI Overhaul and Optimization
|
||||
|
||||
**Domain:** SaaS document management — adding multi-user auth, PostgreSQL, MinIO, cloud storage integrations to existing FastAPI + Vue 3 app
|
||||
**Researched:** 2026-05-21
|
||||
**Overall Confidence:** MEDIUM-HIGH (most core library choices verified against official FastAPI docs and release notes; cloud SDK versions partially from training data, flagged where unverified)
|
||||
**Milestone:** v0.2 — UI Overhaul and Optimization
|
||||
**Researched:** 2026-06-07
|
||||
**Scope:** New additions only. The v0.1 stack (FastAPI, Vue 3, Pinia, Vue Router 4, Vite, Tailwind CSS, PostgreSQL, MinIO) is unchanged and not re-researched here.
|
||||
|
||||
---
|
||||
|
||||
## Existing Stack (Do Not Replace)
|
||||
## Existing Stack Baseline (Confirmed, Do Not Change)
|
||||
|
||||
| Component | Current | Notes |
|
||||
|-----------|---------|-------|
|
||||
| Backend framework | FastAPI 0.136.1 | Latest confirmed from official release notes |
|
||||
| Frontend framework | Vue 3 | Keep as-is |
|
||||
| Runtime | Python 3.11+ | FastAPI supports 3.14t as of 0.136.0 |
|
||||
| Deployment | Docker Compose | Remains primary target |
|
||||
| ASGI server | Uvicorn (via `fastapi run`) | Starlette 1.0.0 now bundled |
|
||||
| Component | Current Version (package.json / requirements.txt) | Notes |
|
||||
|-----------|--------------------------------------------------|-------|
|
||||
| Vue | `^3.4.0` | Must bump to `^3.5.0` (see VueUse note below) |
|
||||
| Vite | `^5.2.0` | Must bump to `^6.0.0` — Vite 8 is latest; skip 8 (too new) |
|
||||
| Tailwind CSS | `^3.4.0` | Stay on v3; v4 is out but requires config rewrite |
|
||||
| Pinia | `^2.1.0` | No change needed |
|
||||
| Vue Router | `^4.3.0` | No change needed |
|
||||
|
||||
---
|
||||
|
||||
## Area 1: Authentication
|
||||
## New Frontend Dependencies
|
||||
|
||||
### JWT — PyJWT 2.12.1
|
||||
### 1. VueUse — `@vueuse/core` + `@vueuse/integrations`
|
||||
|
||||
**Confidence: HIGH** (verified from FastAPI release notes: `pyjwt` bumped to `2.12.1` in FastAPI 0.136.1; FastAPI tutorial now uses `import jwt` not `python-jose`)
|
||||
**Recommended:** `@vueuse/core@^14.3.0`, `@vueuse/integrations@^14.3.0`
|
||||
**Confidence:** HIGH (verified from Context7 docs and npm registry)
|
||||
|
||||
```
|
||||
pip install "pyjwt[crypto]>=2.12.1"
|
||||
**Why:** VueUse provides three composables this milestone needs, each saving 30-100 lines of custom code that would otherwise require careful browser-compatibility testing:
|
||||
|
||||
- `useDropZone` — drop-target zones for drag-and-drop file upload (handles `dragenter`/`dragleave`/`drop`, exposes `isOverDropZone` reactive ref, correct `dataTypes` filtering, Safari limitations documented)
|
||||
- `onKeyStroke` — keyboard shortcut registration without manual `addEventListener`/`removeEventListener` lifecycle management
|
||||
- `useSortable` (from `@vueuse/integrations`) — thin wrapper over SortableJS for list/folder reordering, auto-syncs to reactive array
|
||||
|
||||
**Bundle impact:** `@vueuse/core` unpacked size is ~870 KB but it is fully tree-shakeable — only imported composables are included in the bundle. Each composable is typically 1-3 KB gzipped. This is the correct way to import:
|
||||
|
||||
```js
|
||||
import { useDropZone, onKeyStroke } from '@vueuse/core'
|
||||
import { useSortable } from '@vueuse/integrations/useSortable'
|
||||
```
|
||||
|
||||
Use `pyjwt[crypto]` to enable RS256/ES256 if asymmetric keys are ever needed. For this project HS256 with a strong secret is sufficient (single-issuer, stateless).
|
||||
**Critical version constraint:** VueUse v14.0+ requires `vue@^3.5.0`. The current `package.json` pins `^3.4.0`. Vue 3.5 has no breaking changes for Options API components (confirmed from official Vue blog — purely additive release: reactivity improvements, -56% memory usage). Bump Vue to `^3.5.0` as part of this milestone's first phase.
|
||||
|
||||
**Do not use `python-jose`** — the FastAPI tutorial no longer references it, it has had unmaintained periods, and the official docs have migrated entirely to PyJWT.
|
||||
**`@vueuse/integrations` peer deps:** `useSortable` requires `sortablejs@^1` as a peer dependency. Install `sortablejs` alongside.
|
||||
|
||||
### Password Hashing — pwdlib 0.2.x with Argon2
|
||||
|
||||
**Confidence: HIGH** (verified from current FastAPI security tutorial — `pwdlib[argon2]` is the documented recommendation, replacing the old `passlib[bcrypt]` guidance)
|
||||
|
||||
```
|
||||
pip install "pwdlib[argon2]>=0.2.0"
|
||||
```bash
|
||||
npm install @vueuse/core@^14.3.0 @vueuse/integrations@^14.3.0 sortablejs@^1.15.7
|
||||
npm install -D @types/sortablejs
|
||||
```
|
||||
|
||||
**Why Argon2 over bcrypt:** Argon2id won the Password Hashing Competition, is memory-hard (resistant to GPU/ASIC attacks), and is the default recommendation in OWASP 2025 guidelines. `pwdlib` is a thin, modern wrapper; it does not carry `passlib`'s legacy baggage.
|
||||
|
||||
**Exception:** If the existing codebase already stores any bcrypt hashes, keep `passlib[bcrypt]` for the migration phase to verify and re-hash on login, then remove it.
|
||||
|
||||
### TOTP 2FA — pyotp 2.9.x
|
||||
|
||||
**Confidence: MEDIUM** (standard library for RFC 6238 TOTP in Python; no competing library of comparable adoption exists; version from training data — verify on PyPI before pinning)
|
||||
|
||||
```
|
||||
pip install "pyotp>=2.9.0"
|
||||
```
|
||||
|
||||
`pyotp` implements RFC 6238 TOTP and RFC 4226 HOTP. It generates provisioning URIs compatible with Google Authenticator, Authy, and any standard TOTP app. Generates QR code URIs via `pyotp.totp.TOTP.provisioning_uri()`. Pair with `qrcode[pil]` or `segno` to render a QR code PNG for the setup screen.
|
||||
|
||||
For TOTP enrollment flow:
|
||||
1. Generate secret: `pyotp.random_base32()`
|
||||
2. Store secret encrypted at rest (Fernet — see credential encryption below)
|
||||
3. Return provisioning URI + QR code to user
|
||||
4. Verify one TOTP code before marking 2FA active
|
||||
5. On login: verify password first, then verify TOTP code with a 1-period window (`valid_window=1`)
|
||||
|
||||
### Session / Token Strategy
|
||||
|
||||
**Confidence: HIGH** (pattern; no external library needed beyond PyJWT)
|
||||
|
||||
Use a **dual-token pattern** for stateless horizontal scaling:
|
||||
- **Access token**: Short-lived JWT (15 min), HS256, payload includes `user_id`, `email`, `roles`, `jti`
|
||||
- **Refresh token**: Long-lived JWT (7–30 days), stored as `httpOnly` + `Secure` cookie, rotated on use
|
||||
- **Revocation**: Store `jti` of revoked refresh tokens in PostgreSQL `token_blacklist` table with TTL. Clean up expired entries via a periodic task.
|
||||
|
||||
No additional session library is needed. Do not use Redis for token storage — the PROJECT.md requires stateless backends; a PostgreSQL blacklist table is sufficient for this scale and avoids another infrastructure dependency.
|
||||
|
||||
FastAPI's `fastapi.security.OAuth2PasswordBearer` handles the Bearer extraction from headers. Implement `get_current_user` as a dependency.
|
||||
|
||||
### Credential Encryption (Cloud OAuth Tokens, TOTP Secrets) — cryptography 44.x Fernet
|
||||
|
||||
**Confidence: HIGH** (cryptography is a stable, core Python library; Fernet is its symmetric authenticated encryption primitive)
|
||||
|
||||
```
|
||||
pip install "cryptography>=44.0.0"
|
||||
```
|
||||
|
||||
`cryptography.fernet.Fernet` provides AES-128-CBC + HMAC-SHA256 in a single call. Key lives in an env var (`FERNET_KEY`), never in the database. Encrypt per-user cloud OAuth tokens and TOTP secrets before writing to PostgreSQL. This satisfies the PROJECT.md privacy constraint: admin queries never see plaintext credentials.
|
||||
|
||||
**Key derivation pattern:** Generate one `Fernet.generate_key()` at deploy time, store in `CREDENTIAL_ENCRYPTION_KEY` env var, inject via Docker Compose secrets. Do not store the key in the database or expose it through any admin endpoint.
|
||||
**Do NOT use VueUse as a global plugin** (`app.use(VueUse)`) — it doesn't have one. Import composables individually, always.
|
||||
|
||||
---
|
||||
|
||||
## Area 2: Database
|
||||
### 2. vue-virtual-scroller — `vue-virtual-scroller`
|
||||
|
||||
### ORM — SQLAlchemy 2.0 (async) + psycopg (v3)
|
||||
**Recommended:** `vue-virtual-scroller@^3.0.4`
|
||||
**Confidence:** HIGH (verified from Context7 docs and npm registry; published 2026-05-20, actively maintained)
|
||||
|
||||
**Confidence: HIGH for SQLAlchemy 2.0 async; MEDIUM for psycopg v3 vs asyncpg** (SQLAlchemy 2.0 async confirmed stable; driver choice between asyncpg and psycopg 3 is functionally equivalent — see note below)
|
||||
**Why:** Document lists can reach hundreds or thousands of entries per user. Without virtual scrolling, rendering all `DocumentCard` components simultaneously degrades scroll performance significantly on mobile. `vue-virtual-scroller` is the canonical Vue 3 virtual list library by Guillaume Chau (Akryum, Vue core team contributor). It ships ESM-only, is Vite-native, and requires Vue 3.3+ (compatible with our 3.5 bump).
|
||||
|
||||
**Components used:**
|
||||
- `<RecycleScroller>` — fixed item height, highest performance. Use for the main document grid where item height is deterministic.
|
||||
- `<DynamicScroller>` — variable item height. Use only if needed (e.g. list view with text previews of different lengths).
|
||||
|
||||
**Bundle size:** Unpacked ~461 KB; ESM-only means Rollup tree-shakes unused components. Requires importing its CSS: `import 'vue-virtual-scroller/index.css'`.
|
||||
|
||||
**Integration note:** Because `RecycleScroller` pools and reuses DOM nodes, every item component must be fully reactive from props alone — no internal `mounted()` side effects that assume a fresh component per item. Options API components that follow the props-down / events-up pattern (as required by the existing architecture) are fully compatible.
|
||||
|
||||
```bash
|
||||
npm install vue-virtual-scroller@^3.0.4
|
||||
```
|
||||
pip install "sqlalchemy[asyncio]>=2.0.36" "psycopg[asyncio,binary]>=3.2.0"
|
||||
```
|
||||
|
||||
**Why SQLAlchemy 2.0 over SQLModel for this project:**
|
||||
|
||||
SQLModel 0.0.38 (current version per FastAPI release notes) is the official recommendation for greenfield apps, but for this brownfield migration it introduces risk:
|
||||
|
||||
1. SQLModel does not yet have first-class async session documentation. Its `AsyncSession` support works but is inherited from SQLAlchemy and not well-documented in SQLModel's own tutorials.
|
||||
2. The existing codebase already has Pydantic models for all API schemas. Adding SQLModel means maintaining a second model hierarchy (table models vs response models) which increases complexity mid-migration.
|
||||
3. SQLAlchemy 2.0 `AsyncSession` with `asyncpg` or `psycopg[asyncio]` is battle-tested and the pattern used by the FastAPI full-stack template.
|
||||
4. Alembic (see below) integrates directly with SQLAlchemy — the migration toolchain is native.
|
||||
|
||||
**Recommended pattern:**
|
||||
```python
|
||||
from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession, async_sessionmaker
|
||||
|
||||
engine = create_async_engine(
|
||||
"postgresql+psycopg://user:pass@db:5432/docuvault",
|
||||
pool_pre_ping=True,
|
||||
pool_size=10,
|
||||
max_overflow=20,
|
||||
)
|
||||
AsyncSessionLocal = async_sessionmaker(engine, expire_on_commit=False)
|
||||
|
||||
async def get_db() -> AsyncGenerator[AsyncSession, None]:
|
||||
async with AsyncSessionLocal() as session:
|
||||
yield session
|
||||
```
|
||||
|
||||
**asyncpg vs psycopg 3:** Both work with SQLAlchemy 2.0 async. Prefer `psycopg[asyncio,binary]` for this project because:
|
||||
- psycopg 3 is the PostgreSQL-sanctioned successor to psycopg2, meaning the same package covers both sync (Alembic) and async (FastAPI) paths
|
||||
- asyncpg is async-only and requires a separate sync driver for Alembic migrations
|
||||
- psycopg 3 binary wheel has comparable performance to asyncpg in benchmarks
|
||||
|
||||
**Conflict note:** psycopg2 is incompatible with psycopg 3 (different import names: `psycopg2` vs `psycopg`). If any existing dependency pins `psycopg2`, update it. Do not install both.
|
||||
|
||||
### Migrations — Alembic 1.14.x
|
||||
|
||||
**Confidence: HIGH** (Alembic is the only migration tool for SQLAlchemy; no viable alternative)
|
||||
|
||||
```
|
||||
pip install "alembic>=1.14.0"
|
||||
```
|
||||
|
||||
**Async migration pattern** — Alembic's `env.py` needs special handling for async engines. Use the `run_sync` pattern:
|
||||
|
||||
```python
|
||||
# alembic/env.py
|
||||
import asyncio
|
||||
from sqlalchemy.ext.asyncio import create_async_engine
|
||||
|
||||
def run_migrations_online():
|
||||
connectable = create_async_engine(settings.DATABASE_URL)
|
||||
|
||||
async def run():
|
||||
async with connectable.connect() as connection:
|
||||
await connection.run_sync(do_run_migrations)
|
||||
|
||||
asyncio.run(run())
|
||||
```
|
||||
|
||||
**Migration strategy for brownfield migration:**
|
||||
1. Create initial migration that builds schema from scratch (new install path)
|
||||
2. Create a separate data migration script that reads flat-file JSON and inserts rows
|
||||
3. Run both in sequence during the deploy that replaces the existing data
|
||||
|
||||
---
|
||||
|
||||
## Area 3: Object Storage (MinIO)
|
||||
### 3. Drag-and-Drop for File Upload — Native HTML5 + VueUse `useDropZone`
|
||||
|
||||
### MinIO Python SDK 7.x
|
||||
**Recommended:** No additional library. Use `useDropZone` from `@vueuse/core` (already added above).
|
||||
**Confidence:** HIGH
|
||||
|
||||
**Confidence: MEDIUM** (MinIO SDK is well-known; exact version from training data — verify on PyPI before pinning)
|
||||
**Why not a dedicated library:** The drag-and-drop requirement for this milestone is drop-zone file upload (files dragged from OS to a browser area). `useDropZone` covers this completely. Dedicated upload libraries like `dropzone-vue` or `vue-file-uploader` are either poorly maintained, opinionated about UI, or duplicate what the existing upload flow already does. The existing backend upload endpoint and progress tracking are already implemented — adding a library that wraps both drop detection and upload would require replacing working code.
|
||||
|
||||
```
|
||||
pip install "minio>=7.2.0"
|
||||
```
|
||||
**For folder/list reordering** (drag document into a different folder), use `useSortable` from `@vueuse/integrations` (already added above via SortableJS). SortableJS handles this precisely: it is a low-level, pure-DOM drag-sort library with no Vue-specific assumptions.
|
||||
|
||||
The MinIO Python SDK (`minio`) wraps the S3 API. It is synchronous. Use it inside FastAPI via `asyncio.to_thread()` for large streaming operations, or call it directly for short metadata operations.
|
||||
|
||||
**Important:** Do NOT use the MinIO SDK for high-throughput streaming (uploads/downloads of large documents). Instead, use **pre-signed URLs**:
|
||||
|
||||
```python
|
||||
from minio import Minio
|
||||
from datetime import timedelta
|
||||
|
||||
client = Minio(
|
||||
"minio:9000",
|
||||
access_key=settings.MINIO_ACCESS_KEY,
|
||||
secret_key=settings.MINIO_SECRET_KEY,
|
||||
secure=False, # True in production with TLS
|
||||
)
|
||||
|
||||
# Generate upload URL (client uploads directly to MinIO, bypassing FastAPI)
|
||||
url = client.presigned_put_object(
|
||||
bucket_name="user-documents",
|
||||
object_name=f"{user_id}/{document_id}",
|
||||
expires=timedelta(minutes=15),
|
||||
)
|
||||
|
||||
# Generate download URL
|
||||
url = client.presigned_get_object(
|
||||
bucket_name="user-documents",
|
||||
object_name=f"{user_id}/{document_id}",
|
||||
expires=timedelta(minutes=60),
|
||||
)
|
||||
```
|
||||
|
||||
Pre-signed URLs mean FastAPI never proxies document bytes — only metadata flows through the backend. This is critical for horizontal scaling (no file pinning to a specific backend instance) and for quota enforcement (track bytes at upload-record creation time, not at streaming time).
|
||||
|
||||
**Quota enforcement pattern:**
|
||||
1. Client requests an upload token from FastAPI
|
||||
2. FastAPI checks current usage against `user.quota_used_bytes` + `user.quota_limit_bytes`
|
||||
3. If within quota, record tentative size, issue pre-signed PUT URL
|
||||
4. After successful upload, confirm actual size (via MinIO event or HEAD request) and commit to quota
|
||||
|
||||
**boto3 alternative:** `boto3` works against MinIO via `endpoint_url` override. Only use it if you anticipate migrating to AWS S3 — for a MinIO-only deployment the native SDK is simpler and avoids the large boto3 dependency tree.
|
||||
|
||||
### aiobotocore / aiominio — Do Not Use
|
||||
|
||||
The async MinIO/S3 client libraries (`aiobotocore`, `aiominio`) add significant complexity with uncertain maintenance status. The pre-signed URL pattern renders them unnecessary — the sync SDK is only called in the FastAPI path for URL generation (microseconds), not for streaming.
|
||||
**Do NOT use `vue-draggable-plus` (0.6.1, last published 2026-01-11):** It wraps SortableJS but adds a Vue component abstraction layer that conflicts with the project's data-provider view pattern. It also adds bundle overhead that `useSortable` avoids. The last publish date of January 2026 is acceptable for a stable library, but there is no reason to prefer it over the VueUse integration that is already in the bundle.
|
||||
|
||||
---
|
||||
|
||||
## Area 4: Cloud Storage SDKs
|
||||
### 4. Keyboard Shortcuts — VueUse `onKeyStroke`
|
||||
|
||||
### OneDrive — msgraph-sdk 1.x + azure-identity 1.x
|
||||
**Recommended:** `onKeyStroke` from `@vueuse/core` (already added). No additional library.
|
||||
**Confidence:** HIGH
|
||||
|
||||
**Confidence: MEDIUM** (Microsoft Graph Python SDK is GA per official Microsoft docs; exact version from training data — verify on PyPI)
|
||||
**Why no dedicated library:** Libraries like `vue-shortkey` or `hotkeys-js` exist but are unnecessary overhead. `onKeyStroke` from VueUse handles:
|
||||
- Single key listening: `onKeyStroke('/', handler)` (focus search)
|
||||
- Modifier combos: check `event.ctrlKey` / `event.metaKey` inside the handler
|
||||
- Automatic cleanup when the component is unmounted (it wraps `addEventListener`/`removeEventListener` with `onUnmounted`)
|
||||
|
||||
```
|
||||
pip install "msgraph-sdk>=1.0.0" "azure-identity>=1.19.0"
|
||||
```
|
||||
For a document manager, typical shortcuts are: `/` (search focus), `Escape` (close modal/panel), `Delete` (delete selected), `Enter` (open/confirm). All fit `onKeyStroke` with no wrapper library.
|
||||
|
||||
Microsoft Graph Python SDK (`msgraph-sdk`) is the official Microsoft library for OneDrive access. It covers:
|
||||
- Drive item CRUD (`/me/drive/items/{id}`)
|
||||
- Upload sessions for large files
|
||||
- Delta sync for listing changes
|
||||
**Implementation pattern:**
|
||||
```js
|
||||
// In setup() or a composable
|
||||
import { onKeyStroke } from '@vueuse/core'
|
||||
|
||||
For server-side (backend-behalf-of-user) flows use the **OAuth 2.0 Authorization Code** flow with `azure-identity`'s `OnBehalfOfCredential` or a custom token provider wrapping stored refresh tokens.
|
||||
|
||||
**Important:** Microsoft's OneDrive tokens (access + refresh) must be stored encrypted at rest using the Fernet approach described in Area 1. Refresh tokens are long-lived and grant significant access.
|
||||
|
||||
**Package note:** The older `O365` package and `office365-REST-python-client` both wrap Graph API but are community-maintained. Prefer the official `msgraph-sdk` which Microsoft now actively develops and tests against Graph v1.0.
|
||||
|
||||
### Google Drive — google-api-python-client 2.x + google-auth-oauthlib 1.x
|
||||
|
||||
**Confidence: MEDIUM** (package names confirmed from Google Cloud docs; exact minor versions from training data)
|
||||
|
||||
```
|
||||
pip install "google-api-python-client>=2.150.0" "google-auth-oauthlib>=1.2.0" "google-auth-httplib2>=0.2.0"
|
||||
```
|
||||
|
||||
Use the Drive API v3 (not v2 — v2 is deprecated). For server-side OAuth flows:
|
||||
- Use `google_auth_oauthlib.flow.Flow` for the authorization redirect
|
||||
- Store OAuth2 credentials (`Credentials` object JSON) encrypted in PostgreSQL
|
||||
- Rebuild credentials from stored JSON on each API call: `google.oauth2.credentials.Credentials.from_authorized_user_info(json_data, scopes)`
|
||||
|
||||
Required scopes for this project: `https://www.googleapis.com/auth/drive.file` (access only files created by the app — minimum privilege).
|
||||
|
||||
### Nextcloud — webdav4 0.x
|
||||
|
||||
**Confidence: MEDIUM** (webdav4 is the most actively maintained Python WebDAV client as of 2024; version from training data)
|
||||
|
||||
```
|
||||
pip install "webdav4[fsspec]>=0.9.8"
|
||||
```
|
||||
|
||||
Nextcloud exposes two APIs: WebDAV (for file operations) and OCS (for sharing, users, and metadata). For document upload/download, WebDAV is sufficient. `webdav4` wraps the WebDAV protocol with a clean interface and optional `fsspec` integration.
|
||||
|
||||
**Nextcloud-specific paths:**
|
||||
- WebDAV root: `https://{host}/remote.php/dav/files/{username}/`
|
||||
- Authentication: Basic auth (username + app password) or Bearer token
|
||||
|
||||
For Nextcloud, recommend storing an **app password** (user-generated in Nextcloud settings) rather than OAuth tokens — it's simpler to implement and doesn't require an OAuth app registration.
|
||||
|
||||
**webdavclient3 alternative:** An older library with less active maintenance. `webdav4` is preferred.
|
||||
|
||||
### Generic WebDAV — webdav4 (same package)
|
||||
|
||||
`webdav4` handles generic RFC 4918 WebDAV, so any WebDAV-compatible server (ownCloud, Seafile WebDAV bridge, etc.) is covered by the same adapter.
|
||||
|
||||
---
|
||||
|
||||
## Area 5: Storage Abstraction
|
||||
|
||||
### Pattern — Protocol-based Adapter (no third-party library needed)
|
||||
|
||||
**Confidence: HIGH** (this is the architecture mandated by PROJECT.md and mirrors the existing AI provider pattern)
|
||||
|
||||
Define a `StorageBackend` Protocol that all adapters implement:
|
||||
|
||||
```python
|
||||
from typing import Protocol, AsyncIterator
|
||||
|
||||
class StorageBackend(Protocol):
|
||||
async def put_object(
|
||||
self,
|
||||
path: str,
|
||||
data: AsyncIterator[bytes],
|
||||
size: int,
|
||||
content_type: str,
|
||||
) -> None: ...
|
||||
|
||||
async def get_object(self, path: str) -> AsyncIterator[bytes]: ...
|
||||
|
||||
async def delete_object(self, path: str) -> None: ...
|
||||
|
||||
async def list_objects(self, prefix: str) -> list[str]: ...
|
||||
|
||||
async def get_presigned_url(self, path: str, expires_seconds: int) -> str | None: ...
|
||||
```
|
||||
|
||||
Concrete implementations:
|
||||
- `MinIOBackend` — uses the MinIO SDK + pre-signed URLs
|
||||
- `OneDriveBackend` — uses `msgraph-sdk`
|
||||
- `GoogleDriveBackend` — uses `google-api-python-client`
|
||||
- `NextcloudBackend` — uses `webdav4`
|
||||
|
||||
The `get_presigned_url` method returns `None` for backends that don't support it (Google Drive, Nextcloud). FastAPI then falls back to proxying the stream through the backend for those cases.
|
||||
|
||||
**No FSSpec dependency at the protocol layer** — FSSpec (`fsspec`) can be used internally by `webdav4` but should not leak into the storage abstraction interface. The interface must be async-native.
|
||||
|
||||
**Per-user backend resolution:** Store `user.storage_backend_type` (enum: `minio`, `onedrive`, `gdrive`, `nextcloud`) and `user.storage_backend_credential_id` (FK to encrypted credentials table) in PostgreSQL. A `StorageBackendFactory` resolves the correct adapter on each request.
|
||||
|
||||
---
|
||||
|
||||
## Area 6: Vue 3 Auth Patterns
|
||||
|
||||
### State Management — Pinia 2.x
|
||||
|
||||
**Confidence: HIGH** (Pinia is the official Vue 3 state management library per vuejs.org; Vuex is deprecated for Vue 3)
|
||||
|
||||
```
|
||||
npm install pinia@^2.0.0
|
||||
```
|
||||
|
||||
Store auth state in a Pinia store:
|
||||
|
||||
```typescript
|
||||
// stores/auth.ts
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useAuthStore = defineStore('auth', {
|
||||
state: () => ({
|
||||
accessToken: null as string | null,
|
||||
user: null as User | null,
|
||||
}),
|
||||
getters: {
|
||||
isAuthenticated: (state) => !!state.accessToken,
|
||||
},
|
||||
actions: {
|
||||
setTokens(accessToken: string) {
|
||||
this.accessToken = accessToken
|
||||
// Refresh token is httpOnly cookie — not stored in JS
|
||||
},
|
||||
logout() {
|
||||
this.accessToken = null
|
||||
this.user = null
|
||||
},
|
||||
},
|
||||
onKeyStroke('/', (e) => {
|
||||
e.preventDefault()
|
||||
searchInput.value?.focus()
|
||||
})
|
||||
```
|
||||
|
||||
### Token Storage Strategy
|
||||
---
|
||||
|
||||
**Confidence: HIGH** (security best practice, not library-specific)
|
||||
### 5. Loading Skeletons — Pure Tailwind CSS
|
||||
|
||||
- **Access token:** Store in Pinia memory state only (not `localStorage`, not `sessionStorage`). Survives tab navigation but is cleared on page refresh — intentional for security.
|
||||
- **Refresh token:** Store as `httpOnly; Secure; SameSite=Strict` cookie set by FastAPI. Never readable by JavaScript. Refresh is done by hitting a `/auth/refresh` endpoint which reads the cookie server-side.
|
||||
- **Do not use `localStorage` for tokens** — XSS vulnerability. In a document management app users upload arbitrary files; stored XSS risk is not theoretical.
|
||||
**Recommended:** No library. Use `animate-pulse` utility with placeholder shapes.
|
||||
**Confidence:** HIGH
|
||||
|
||||
On page load/refresh, immediately call `/auth/me` (which uses the httpOnly refresh cookie automatically). If it returns 200, restore access token from the response. If 401, redirect to login.
|
||||
**Why no library:** Skeleton loaders in this app are simple rectangular placeholders — cards, list rows, and a few text lines. Tailwind's `animate-pulse` combined with `bg-gray-200 dark:bg-gray-700` rounded shapes is sufficient and produces zero additional bundle weight. A skeleton library (`vue3-skeleton`, etc.) would add a dependency for something that is 5 lines of Tailwind HTML per component.
|
||||
|
||||
### Protected Routes — Vue Router 4.x Navigation Guards
|
||||
|
||||
**Confidence: HIGH** (Vue Router 4 is the Vue 3 router; this is a standard pattern)
|
||||
|
||||
```
|
||||
npm install vue-router@^4.0.0
|
||||
**Recommended pattern for a document card skeleton:**
|
||||
```html
|
||||
<div class="animate-pulse rounded-lg border border-gray-200 p-4">
|
||||
<div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
|
||||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```typescript
|
||||
// router/index.ts
|
||||
router.beforeEach(async (to) => {
|
||||
const auth = useAuthStore()
|
||||
|
||||
if (to.meta.requiresAuth && !auth.isAuthenticated) {
|
||||
// Attempt silent refresh before redirecting
|
||||
try {
|
||||
await auth.silentRefresh() // hits /auth/refresh endpoint
|
||||
} catch {
|
||||
return { name: 'login', query: { redirect: to.fullPath } }
|
||||
}
|
||||
}
|
||||
For a shimmer effect (more polished than pulse), use a CSS `@keyframes` background-position animation — still zero JS dependency. Only add a library if shimmer is required across 10+ distinct skeleton shapes that need consistent management.
|
||||
|
||||
---
|
||||
|
||||
### 6. Tailwind CSS Plugins
|
||||
|
||||
**Recommended:** `@tailwindcss/forms@^0.5.11`
|
||||
**Confidence:** HIGH (official Tailwind Labs plugin, 4,500+ GitHub stars, supports both v3 and v4)
|
||||
|
||||
**Why `@tailwindcss/forms`:** DocuVault has several form-heavy screens (login, registration, upload dialog, admin user management, cloud credential entry). Browser defaults for `<input>`, `<select>`, `<textarea>`, `<checkbox>`, and `<radio>` are inconsistent across platforms and resist Tailwind utility styling. `@tailwindcss/forms` provides a minimal, accessible reset that makes all form elements style-consistent and fully overridable with utilities. Unpacked size is 55 KB; it is a PostCSS plugin with zero runtime JS.
|
||||
|
||||
```bash
|
||||
npm install -D @tailwindcss/forms@^0.5.11
|
||||
```
|
||||
|
||||
```js
|
||||
// tailwind.config.js
|
||||
plugins: [require('@tailwindcss/forms')]
|
||||
```
|
||||
|
||||
**Container queries (`@tailwindcss/container-queries`):** Do NOT add. In Tailwind v3, this would be the `@tailwindcss/container-queries` plugin. However, the v0.2 responsive layout target is standard viewport-based breakpoints (`sm:`, `md:`, `lg:`). Container queries are useful when the same component is rendered in contexts of different widths (sidebar vs. main content), but the DocuVault component architecture uses the data-provider view pattern where layout is controlled by the view, not by individual components. This eliminates the primary use case for container queries in this codebase. If a future phase introduces a component genuinely embedded in variable-width containers, add the plugin then.
|
||||
|
||||
**Typography plugin (`@tailwindcss/typography`):** Do NOT add. There is no long-form rich text content in this app — document content is displayed in a preview iframe, not rendered as styled HTML.
|
||||
|
||||
---
|
||||
|
||||
### 7. Bundle Analysis — `rollup-plugin-visualizer`
|
||||
|
||||
**Recommended:** `rollup-plugin-visualizer@^7.0.1` (dev dependency, build-time only)
|
||||
**Confidence:** MEDIUM-HIGH (standard tool, actively maintained, Vite-native)
|
||||
|
||||
**Why:** The bundle size reduction goal requires knowing what is currently in the bundle. `rollup-plugin-visualizer` generates an interactive treemap that shows each module's contribution. Run once at the start of v0.2 to establish baseline, and again after refactoring to verify improvement. It does not affect the production build.
|
||||
|
||||
```bash
|
||||
npm install -D rollup-plugin-visualizer@^7.0.1
|
||||
```
|
||||
|
||||
```js
|
||||
// vite.config.js — enable only when analyzing, not in every build
|
||||
import { visualizer } from 'rollup-plugin-visualizer'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
process.env.ANALYZE ? visualizer({ open: true, filename: 'dist/stats.html' }) : null,
|
||||
].filter(Boolean),
|
||||
})
|
||||
```
|
||||
|
||||
Mark routes with `meta: { requiresAuth: true }`. The guard attempts a silent refresh before redirecting — this handles the page-refresh case where the access token is gone but the refresh cookie is still valid.
|
||||
|
||||
### Refresh Token Handling — Axios Interceptors
|
||||
|
||||
**Confidence: HIGH** (standard pattern for token refresh in SPA + REST API; Axios is already common in Vue 3 projects)
|
||||
|
||||
```
|
||||
npm install axios@^1.0.0
|
||||
```
|
||||
|
||||
```typescript
|
||||
// api/client.ts
|
||||
axiosInstance.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error) => {
|
||||
if (error.response?.status === 401 && !error.config._retry) {
|
||||
error.config._retry = true
|
||||
await authStore.silentRefresh()
|
||||
error.config.headers['Authorization'] = `Bearer ${authStore.accessToken}`
|
||||
return axiosInstance(error.config)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
### TOTP UI — No dedicated library needed
|
||||
|
||||
The TOTP enrollment flow only requires:
|
||||
1. Display a QR code image (returned as base64 PNG from FastAPI, rendered via `<img :src="qrDataUrl">`)
|
||||
2. An OTP input field (6-digit numeric input, `type="text" inputmode="numeric" maxlength="6"`)
|
||||
|
||||
No Vue TOTP component library is needed. Avoid heavy auth UI libraries (Auth0 components, etc.) — they assume SSO flows incompatible with this design.
|
||||
Run with: `ANALYZE=1 npm run build`
|
||||
|
||||
---
|
||||
|
||||
## Full Dependency Summary
|
||||
## Vite Upgrade
|
||||
|
||||
### Python (backend)
|
||||
**Recommended:** Bump from `^5.2.0` to `^6.4.3` (the stable Vite 6 release; avoid Vite 7/8 beta)
|
||||
**Confidence:** HIGH (Vite 6 released 2024-11; Vite 7 and 8 are in beta as of 2026-06)
|
||||
|
||||
```
|
||||
# requirements.txt additions for this milestone
|
||||
**Why Vite 6 over staying on Vite 5:** Vite 6 is a stable, minimal-breaking-change major release. Breaking changes for this project are:
|
||||
1. **Node.js ≥ 20.0.0 required** — Docker Compose service should already use Node 20+ (verify `FROM node:20-alpine` or equivalent in any Dockerfile that runs the frontend build).
|
||||
2. **No other breaking changes apply** to this project (CSS library output file rename only affects library authors, not app builds; SSR CSS change is not applicable).
|
||||
|
||||
# Auth
|
||||
pyjwt[crypto]>=2.12.1
|
||||
pwdlib[argon2]>=0.2.0
|
||||
pyotp>=2.9.0
|
||||
cryptography>=44.0.0
|
||||
qrcode[pil]>=8.0.0 # TOTP QR code generation
|
||||
Vite 6 delivers improved dependency pre-bundling and module runner improvements relevant to the performance goals. The built-in code splitting (`import()` dynamic imports for lazy routes) and tree-shaking require no config changes — they are on by default. The manual chunking config for vendor splitting (Pinia, Vue Router) in `build.rollupOptions.output.manualChunks` can be used if the baseline analysis shows large vendor chunks being repeated across async routes.
|
||||
|
||||
# Database
|
||||
sqlalchemy[asyncio]>=2.0.36
|
||||
psycopg[asyncio,binary]>=3.2.0
|
||||
alembic>=1.14.0
|
||||
**Do NOT upgrade to Vite 7 or 8** — both are in beta as of this research date and are not appropriate for a production milestone.
|
||||
|
||||
# Object storage
|
||||
minio>=7.2.0
|
||||
|
||||
# Cloud storage
|
||||
msgraph-sdk>=1.0.0
|
||||
azure-identity>=1.19.0
|
||||
google-api-python-client>=2.150.0
|
||||
google-auth-oauthlib>=1.2.0
|
||||
google-auth-httplib2>=0.2.0
|
||||
webdav4>=0.9.8
|
||||
```
|
||||
|
||||
### JavaScript (frontend)
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"pinia": "^2.0.0",
|
||||
"vue-router": "^4.0.0",
|
||||
"axios": "^1.0.0"
|
||||
}
|
||||
}
|
||||
```bash
|
||||
npm install -D vite@^6.4.3 @vitejs/plugin-vue@^5.0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Alternatives Considered
|
||||
## Vue Version Bump
|
||||
|
||||
| Category | Recommended | Alternative | Why Not |
|
||||
|----------|-------------|-------------|---------|
|
||||
| JWT | PyJWT 2.12.1 | python-jose | FastAPI docs migrated away; python-jose had unmaintained periods; PyJWT is the Python JWT spec reference implementation |
|
||||
| Password hashing | pwdlib + Argon2 | passlib + bcrypt | passlib is in maintenance mode; bcrypt is weaker than Argon2 (not memory-hard); pwdlib is the current FastAPI recommendation |
|
||||
| ORM | SQLAlchemy 2.0 async | SQLModel 0.0.38 | SQLModel is great for greenfield but brownfield migration risk is higher; async SQLModel docs are thin; direct SQLAlchemy gives full control |
|
||||
| ORM | SQLAlchemy 2.0 async | Tortoise ORM 0.21.x | Tortoise has its own metaclass system that conflicts with Pydantic models; integration with FastAPI requires aerich for migrations (separate toolchain); less ecosystem momentum than SQLAlchemy |
|
||||
| PostgreSQL driver | psycopg 3 | asyncpg | asyncpg is async-only (needs separate sync driver for Alembic); psycopg 3 covers both paths; psycopg 3 is the official PostgreSQL Python driver successor |
|
||||
| OneDrive | msgraph-sdk | O365 / office365-REST | Community-maintained; Graph API coverage incomplete; Microsoft has deprecated these in favor of the official SDK |
|
||||
| S3 integration | minio native SDK | boto3 | boto3 pulls in botocore (large dep tree); minio SDK is purpose-built and simpler for MinIO-only use; boto3 makes sense only if AWS S3 migration is planned |
|
||||
| Frontend state | Pinia | Vuex | Vuex is the Vue 2 store; Vue 3 official recommendation is Pinia |
|
||||
| Token storage | Memory (Pinia) | localStorage | localStorage is vulnerable to XSS; document management apps with file upload have non-trivial XSS surface |
|
||||
**Required:** `^3.4.0` → `^3.5.0`
|
||||
**Confidence:** HIGH (no breaking changes for Options API; confirmed from official Vue 3.5 blog post)
|
||||
|
||||
This is required by `@vueuse/core@^14.0`. Vue 3.5 is a drop-in upgrade for Options API components — the release is purely additive (reactivity performance improvements, `useTemplateRef()` for Composition API). No component changes are needed.
|
||||
|
||||
```bash
|
||||
npm install vue@^3.5.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What NOT to Use
|
||||
## Backend — No New Python Packages Needed
|
||||
|
||||
| Avoid | Why | Use Instead |
|
||||
|-------|-----|-------------|
|
||||
| `python-jose` | No longer referenced by FastAPI docs; had maintenance gaps; `python-multipart` dependency overlap caused version conflicts | `pyjwt[crypto]` |
|
||||
| `passlib[bcrypt]` for new hashes | In maintenance mode; bcrypt is not memory-hard; weaker than Argon2 against modern GPU attacks | `pwdlib[argon2]` (keep passlib only for migrating existing bcrypt hashes) |
|
||||
| `Tortoise ORM` | Incompatible metaclass system creates friction with Pydantic v2; aerich migration toolchain is less mature; smaller ecosystem | SQLAlchemy 2.0 async |
|
||||
| `tiangolo/uvicorn-gunicorn-fastapi` Docker image | **Deprecated** by FastAPI author as of 2024. Official FastAPI docs now recommend building from `python:3.x` base directly | Plain `python:3.12-slim` base image |
|
||||
| `databases` (encode/databases) | Was an early async DB wrapper; SQLAlchemy 2.0 async has superseded its use case; the project is effectively in maintenance mode | SQLAlchemy 2.0 `AsyncSession` |
|
||||
| `localStorage` for auth tokens | XSS-accessible; a document management app is an attractive XSS target | httpOnly cookies for refresh tokens; Pinia memory for access tokens |
|
||||
| Multiple per-user Fernet keys | Overly complex key management; one platform-level Fernet key is sufficient — user data isolation is enforced at the PostgreSQL row level, not at the encryption key level | Single `CREDENTIAL_ENCRYPTION_KEY` env var |
|
||||
**Confidence:** HIGH
|
||||
|
||||
FastAPI's `APIRouter` (already used) is the correct and sufficient tool for router decomposition. Splitting large router files into smaller modules uses only `APIRouter(prefix=..., tags=[...])` and `app.include_router()` — both already in the project. No new library is warranted.
|
||||
|
||||
**Pattern for large router decomposition:**
|
||||
```
|
||||
backend/routers/
|
||||
documents/
|
||||
__init__.py # from .upload import router as upload_router; etc.
|
||||
upload.py # APIRouter for POST /documents
|
||||
search.py # APIRouter for GET /documents
|
||||
share.py # APIRouter for share endpoints
|
||||
admin/
|
||||
__init__.py
|
||||
users.py
|
||||
audit.py
|
||||
settings.py
|
||||
```
|
||||
|
||||
Include in `main.py`:
|
||||
```python
|
||||
from routers.documents import router as documents_router
|
||||
from routers.admin import router as admin_router
|
||||
|
||||
app.include_router(documents_router, prefix="/documents", tags=["documents"])
|
||||
app.include_router(admin_router, prefix="/admin", tags=["admin"])
|
||||
```
|
||||
|
||||
This is a pure refactor — no new dependencies, no behavior change, no test changes except updating import paths.
|
||||
|
||||
---
|
||||
|
||||
## Stack Compatibility Notes
|
||||
## Full v0.2 Dependency Diff
|
||||
|
||||
| Concern | Detail |
|
||||
|---------|--------|
|
||||
| Pydantic v2 required | FastAPI 0.136.x requires `pydantic>=2.9.0`. SQLAlchemy 2.0 is Pydantic v2-compatible. The existing app must already be on Pydantic v2 to run FastAPI 0.136. |
|
||||
| psycopg 3 vs psycopg 2 | If the existing codebase (or any dependency) imports `psycopg2`, there will be a name conflict. `psycopg` (v3) imports as `import psycopg`, so they can technically coexist in the same environment, but avoid having both. |
|
||||
| Starlette 1.0.0 | Bumped in FastAPI 0.136.1 — this is a major version. If the existing app uses any Starlette internals directly (middleware, routing), audit for breaking changes before upgrading FastAPI. |
|
||||
| PyJWT 2.x vs 1.x API | PyJWT 2.x changed `jwt.encode()` to return `str` (not `bytes`). If the existing codebase has any JWT code using the 1.x API, update the call sites. |
|
||||
| Vue Router 4 + Pinia SSR | Not applicable (no SSR in this project), but worth noting: Pinia's state is per-request in SSR contexts. For this SPA deployment, no issues. |
|
||||
| Argon2 system dependency | `pwdlib[argon2]` requires `argon2-cffi` which needs a C compiler or binary wheel. The official Python Docker image (`python:3.12-slim`) provides wheels for common platforms — no `build-essential` needed. |
|
||||
### `npm install` (production dependencies)
|
||||
|
||||
```bash
|
||||
npm install \
|
||||
vue@^3.5.0 \
|
||||
@vueuse/core@^14.3.0 \
|
||||
@vueuse/integrations@^14.3.0 \
|
||||
sortablejs@^1.15.7 \
|
||||
vue-virtual-scroller@^3.0.4
|
||||
```
|
||||
|
||||
### `npm install -D` (dev dependencies)
|
||||
|
||||
```bash
|
||||
npm install -D \
|
||||
vite@^6.4.3 \
|
||||
@vitejs/plugin-vue@^5.0.0 \
|
||||
@tailwindcss/forms@^0.5.11 \
|
||||
rollup-plugin-visualizer@^7.0.1 \
|
||||
@types/sortablejs@^1.15.0
|
||||
```
|
||||
|
||||
### Python backend additions
|
||||
|
||||
**None.** All backend work (router decomposition, service extraction) uses FastAPI primitives already present.
|
||||
|
||||
---
|
||||
|
||||
## Version Compatibility Matrix
|
||||
## Alternatives Considered and Rejected
|
||||
|
||||
| Package | Version | Python | Pydantic | FastAPI |
|
||||
|---------|---------|--------|---------|--------|
|
||||
| pyjwt | 2.12.1 | 3.8+ | any | 0.100+ |
|
||||
| pwdlib | 0.2.x | 3.9+ | v2 | 0.100+ |
|
||||
| sqlalchemy | 2.0.36+ | 3.8+ | v2 (via fastapi) | 0.100+ |
|
||||
| psycopg (v3) | 3.2.x | 3.8+ | — | — |
|
||||
| alembic | 1.14.x | 3.8+ | — | — |
|
||||
| minio | 7.2.x | 3.7+ | — | — |
|
||||
| msgraph-sdk | 1.x | 3.8+ | — | — |
|
||||
| azure-identity | 1.19.x | 3.8+ | — | — |
|
||||
| pinia | 2.x | — | — | — |
|
||||
| vue-router | 4.x | — | — | — |
|
||||
| Category | Rejected | Reason |
|
||||
|----------|----------|--------|
|
||||
| Drag-and-drop file upload | `dropzone-vue`, `vue-file-uploader` | Opinionated UI, poor maintenance, duplicates existing backend upload flow |
|
||||
| Drag-and-drop sorting | `vue-draggable-plus@0.6.1` | Adds Vue component abstraction over SortableJS that conflicts with data-provider view pattern; VueUse `useSortable` covers the same need with less surface area |
|
||||
| Virtual scrolling | `@tanstack/vue-virtual` | Lower-level API requiring more integration code than `vue-virtual-scroller`; no meaningful bundle advantage; vue-virtual-scroller is Vue-native |
|
||||
| Keyboard shortcuts | `hotkeys-js`, `vue-shortkey` | Unnecessary wrapper over `addEventListener`; VueUse `onKeyStroke` is sufficient and already in the bundle |
|
||||
| Loading skeletons | `vue3-skeleton` | 5-line Tailwind pattern produces identical results; no justification for an additional dependency |
|
||||
| Tailwind container queries | `@tailwindcss/container-queries` | Viewport breakpoints are sufficient for this app's layout; container queries solve a problem this codebase does not have |
|
||||
| Tailwind typography | `@tailwindcss/typography` | No prose HTML content in this app |
|
||||
| Vite 7 / 8 | Latest beta | Both in beta as of research date; not appropriate for a production milestone |
|
||||
|
||||
---
|
||||
|
||||
## Compatibility Matrix (v0.2 additions)
|
||||
|
||||
| Package | Version | Vue Requirement | Vite Compatibility | Tree-Shakeable |
|
||||
|---------|---------|-----------------|-------------------|----------------|
|
||||
| `@vueuse/core` | ^14.3.0 | ^3.5.0 | Vite 5+ | Yes — import individually |
|
||||
| `@vueuse/integrations` | ^14.3.0 | ^3.5.0 | Vite 5+ | Yes |
|
||||
| `sortablejs` | ^1.15.7 | — (plain JS) | Any | Yes |
|
||||
| `vue-virtual-scroller` | ^3.0.4 | ^3.3.0 | Vite (ESM) | Partial (register components individually) |
|
||||
| `@tailwindcss/forms` | ^0.5.11 | — (PostCSS) | Any | N/A (CSS plugin) |
|
||||
| `rollup-plugin-visualizer` | ^7.0.1 | — (build tool) | Vite 5+ | N/A (dev only) |
|
||||
| `vue` | ^3.5.0 | — | — | — |
|
||||
| `vite` | ^6.4.3 | — | — | — |
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- FastAPI official release notes (verified 2026-05-21): https://fastapi.tiangolo.com/release-notes/ — PyJWT 2.12.1, SQLModel 0.0.38, Starlette 1.0.0, pydantic>=2.9.0 confirmed
|
||||
- FastAPI security tutorial (verified 2026-05-21): https://fastapi.tiangolo.com/tutorial/security/oauth2-jwt/ — PyJWT recommended, python-jose absent, pwdlib[argon2] recommended
|
||||
- FastAPI SQL databases tutorial (verified 2026-05-21): https://fastapi.tiangolo.com/tutorial/sql-databases/ — SQLModel documented as recommended ORM
|
||||
- FastAPI Docker guide (verified 2026-05-21): https://fastapi.tiangolo.com/deployment/docker/ — tiangolo/uvicorn-gunicorn-fastapi deprecated confirmed
|
||||
- Microsoft Graph SDK overview (verified 2026-05-21): https://learn.microsoft.com/en-us/graph/sdks/sdks-overview — Python SDK confirmed GA
|
||||
- pwdlib argon2 version: MEDIUM confidence — training data, verify on PyPI
|
||||
- pyotp version: MEDIUM confidence — training data, verify on PyPI
|
||||
- minio Python SDK version: MEDIUM confidence — training data, verify on PyPI
|
||||
- webdav4 version: MEDIUM confidence — training data, verify on PyPI
|
||||
- google-api-python-client version: MEDIUM confidence — training data, verify on PyPI
|
||||
- azure-identity / msgraph-sdk minor versions: MEDIUM confidence — training data, verify on PyPI
|
||||
- VueUse v14.3.0 docs and peer dependencies: Context7 `/vueuse/vueuse`, verified via npm registry (2026-06-07)
|
||||
- vue-virtual-scroller v3.0.4: Context7 `/akryum/vue-virtual-scroller`, npm registry (last published 2026-05-20)
|
||||
- vue-draggable-plus v0.6.1: npm registry (last published 2026-01-11) — rejected
|
||||
- sortablejs v1.15.7: npm registry (2026-06-07)
|
||||
- Tailwind CSS container queries: official Tailwind CSS announcement — built into v4 core; plugin for v3 would be `@tailwindcss/container-queries` — rejected as out of scope
|
||||
- @tailwindcss/forms: official Tailwind Labs GitHub (tailwindlabs/tailwindcss-forms), 4,500+ stars, supports v3 and v4
|
||||
- rollup-plugin-visualizer: npm registry, v7.0.1 (2026-06-07)
|
||||
- Vue 3.5 no-breaking-changes confirmation: https://blog.vuejs.org/posts/vue-3-5
|
||||
- Vite 6 migration guide: https://v6.vite.dev/guide/migration
|
||||
- FastAPI router decomposition: https://fastapi.tiangolo.com/tutorial/bigger-applications/ (built-in, no new deps)
|
||||
|
||||
---
|
||||
*Stack research for: DocuVault multi-user auth, PostgreSQL, MinIO, cloud integrations*
|
||||
*Researched: 2026-05-21*
|
||||
*Stack research for: DocuVault v0.2 — UI Overhaul and Optimization*
|
||||
*Researched: 2026-06-07*
|
||||
|
||||
Reference in New Issue
Block a user