docs: refresh web UI guidance and demo

CONTRIBUTING.md

@@ -48,8 +48,8 @@ Review screenshots in `output/playwright/` before considering UI work complete.
 ## Code Style
 
 - Backend code lives in `app/` and uses async FastAPI + SQLAlchemy patterns.
-- Frontend code lives in `frontend/` and uses React, React Router, and
+- Frontend code lives in `frontend/` and uses Vue 3, TypeScript, Pinia, and
-  TanStack Query.
+  the OpenCloud design system.
 - Keep browser file preview/download flows authenticated through the API client.
 - Prefer clear names and small modules over clever abstractions.
 

docs/development.md

@@ -85,16 +85,21 @@ Required workflow:
 The E2E flow currently covers:
 
 - login
-- files page render
+- files page render with OpenCloud-style navigation icons
 - create folder
+- enter a folder and return to the parent directory
 - upload text file
 - authenticated file download
 - upload image file
 - authenticated inline image preview
-- file storage replica inspector
+- file storage replica inspector and read-only replica detail drawer
-- search
+- More menu actions, Escape dismissal, and click-outside dismissal
-- uploads, recycle bin, storage batch checks, backend edit dialog, policies save, and jobs page render
+- delete confirmation button readability
-- browser `/api` 4xx/5xx failures during the flow
+- file search, file pagination, and page-size changes
+- recycle bin, storage batch checks, backend edit/create dialogs, policies save, and jobs detail render
+- desktop and mobile screenshots for visual review
+- browser `/api`, `/assets`, and `/icons` 4xx/5xx failures during the flow
+- label/value spacing checks for narrow inspector panels
 
 ## Secrets
 

scripts/generate_readme_demo.py

@@ -74,7 +74,7 @@ def capture_demo_frames(base_url: str) -> list[Path]:
         page.get_by_label("Password").fill("changeme-iron")
         page.get_by_role("button", name="Sign in").click()
         page.wait_for_url(f"{base_url}/app/files")
-        page.locator(".files-header .crumb-button").filter(has_text="/").first.wait_for()
+        page.locator(".files-header").filter(has_text="Personal").first.wait_for()
         frame_paths.append(capture_frame(page, "02-files"))
 
         page.locator(".panel-toolbar").get_by_role("button", name="New").click()
@@ -102,8 +102,9 @@ def capture_demo_frames(base_url: str) -> list[Path]:
         page.locator("img.preview-frame").wait_for(timeout=15000)
         frame_paths.append(capture_frame(page, "05-preview"))
 
-        page.get_by_role("button", name="Storage").click()
+        page.locator(".detail-panel").get_by_role("button", name="More Info").click()
-        page.get_by_role("button", name="Reconcile File").wait_for()
+        page.locator(".detail-drawer", has_text="Replica Info").wait_for()
+        page.locator(".detail-drawer", has_text="Desired Backends").wait_for()
         frame_paths.append(capture_frame(page, "06-storage"))
 
         page.goto(f"{base_url}/app/storage", wait_until="networkidle")