docs(06.2-05): complete plan summary — 4 UAT gaps closed

- Task 1: @handle in AccountView + AdminUsersTab - Task 2: actionable cloud error (Settings link) + audit log @ prefix - Task 3: clearFilters() + activeFilterCount + Clear filters button + filter count badge
2026-05-31 20:12:27 +02:00
parent 5d457d68bf
commit e30401ddff
1 changed files with 102 additions and 0 deletions
@@ -0,0 +1,102 @@
+---
+phase: "06.2"
+plan: "05"
+subsystem: "frontend"
+tags: ["gap-closure", "ux", "handle-visibility", "audit-log", "cloud-storage", "csv-export"]
+dependency_graph:
+  requires: ["06.2-04"]
+  provides: ["handle-visibility", "cloud-error-ux", "audit-log-prefixes", "filter-ux"]
+  affects: ["AccountView.vue", "AdminUsersTab.vue", "CloudFolderView.vue", "AuditLogTab.vue"]
+tech_stack:
+  added: []
+  patterns: ["Vue 3 computed property", "router-link for Settings navigation"]
+key_files:
+  created: []
+  modified:
+    - "frontend/src/views/AccountView.vue"
+    - "frontend/src/components/admin/AdminUsersTab.vue"
+    - "frontend/src/views/CloudFolderView.vue"
+    - "frontend/src/components/admin/AuditLogTab.vue"
+decisions:
+  - "@ prefix rendered as literal character in template (not from data) for XSS safety"
+  - "Cloud error detection uses lowercase includes for no active connection plus 404/not found fallback"
+  - "activeFilterCount as computed property (not inline expression) for reuse in two template locations"
+metrics:
+  duration: "2m 8s"
+  completed: "2026-05-31"
+  tasks_completed: 3
+  tasks_total: 3
+  files_changed: 4
+---
+
+# Phase 06.2 Plan 05: Close Four UAT-Diagnosed UI Gaps Summary
+
+**One-liner:** Four targeted frontend changes that make user handles visible, cloud storage errors actionable, audit log handles correctly prefixed with @, and CSV export scope transparent.
+
+## What Was Built
+
+Closed all four UAT-diagnosed UI gaps from 06.2-UAT.md with template-only and minimal script changes across four Vue components. No backend changes were required.
+
+### Gap 1: Handle visibility (SHARE-03)
+
+- **AccountView.vue**: Added "Username" row between Email and Role in the Account information section displaying `@{{ authStore.user?.handle }}` — users can now see and share their own handle
+- **AdminUsersTab.vue**: Added "Handle" column (th + td) to the users table showing `@handle` or `—` — admins can look up users' handles for support and sharing
+
+### Gap 2: Actionable cloud connection error (CloudFolderView)
+
+- Updated `load()` catch block to detect "no active connection" / 404 / "not found" errors and replace the generic error message with: "No cloud provider connected. Go to Settings to connect a cloud storage account."
+- Updated error template block to show a `router-link` to `/settings` (Go to Settings) plus a Retry button, replacing the single inline Retry button
+
+### Gap 3: Audit log @ prefix (AuditLogTab)
+
+- Changed the User column cell from `{{ entry.user_handle || entry.user_id || '—' }}` to `{{ entry.user_handle ? '@' + entry.user_handle : (entry.user_id || '—') }}` — entries now display @alice style handles
+
+### Gap 4: Clear filters + active filter count (AuditLogTab)
+
+- Added `clearFilters()` function that resets all four filter fields and re-fetches from page 1
+- Added `activeFilterCount` computed property counting non-empty filter fields
+- Added "Clear filters" button (v-if visible only when activeFilterCount > 0) after the Apply filters button
+- Wrapped Export CSV button in a container that shows "N filter(s) active" in amber text below the button when any filters are set
+- Added `computed` to the vue import
+
+## Commits
+
+| Task | Description | Commit |
+|------|-------------|--------|
+| 1 | Show @handle in AccountView and AdminUsersTab | 045e723 |
+| 2 | Actionable cloud error + audit log @ prefix | f5e111b |
+| 3 | Clear filters button and active filter count in AuditLogTab | 5d457d6 |
+
+## Verification Results
+
+All plan verification checks pass:
+
+```
+Gap 1 - Handle in AccountView: line 12 match
+Gap 1 - Handle in AdminUsersTab: lines 115 (th) + 133 (td)
+Gap 2 - Cloud actionable error: 2 matches (error.value + Go to Settings link)
+Gap 3 - Audit log @ prefix: line 110 match
+Gap 4 - clearFilters|activeFilterCount: 6 matches (>= 5 required)
+npm run build: exits 0 with no errors
+```
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Threat Surface Scan
+
+No new security-relevant surface introduced. All four changes render user-supplied data through Vue template auto-escaping (`{{ }}` not `v-html`). The `@ + entry.user_handle` concatenation in the template is auto-escaped. The error message from the cloud API response is similarly template-interpolated. No new network endpoints, auth paths, or schema changes introduced.
+
+## Self-Check: PASSED
+
+Files exist:
+- frontend/src/views/AccountView.vue: FOUND (modified)
+- frontend/src/components/admin/AdminUsersTab.vue: FOUND (modified)
+- frontend/src/views/CloudFolderView.vue: FOUND (modified)
+- frontend/src/components/admin/AuditLogTab.vue: FOUND (modified)
+
+Commits verified:
+- 045e723: feat(06.2-05): show @handle in AccountView and AdminUsersTab
+- f5e111b: feat(06.2-05): actionable cloud error + audit log @ prefix
+- 5d457d6: feat(06.2-05): clear filters button and active filter count in AuditLogTab