feat(playwright-cli): add comprehensive test generation, tracing, and video recording documentation

- Introduced detailed documentation for test generation workflow in Playwright CLI, covering planning, generating, and healing tests.
- Added tracing capabilities documentation, including usage, output files, and best practices for debugging and performance analysis.
- Included video recording instructions, emphasizing best practices for capturing browser automation sessions with chapter markers and overlays.
- Implemented user tutorial authentication setup and tutorial tests for parent mode in the E2E testing framework.
- Created JSON files for user tutorial state management, ensuring isolated test environments.

frontend/src/components/profile/ProfileSection.vue

@@ -58,9 +58,24 @@ const bodyStyle = computed(() => {
 
 async function measureHeight() {
   await nextTick()
-  if (contentRef.value) {
-    bodyHeight.value = contentRef.value.scrollHeight
+  if (!contentRef.value || !innerRef.value) return
+  // The outer body is currently collapsed (max-height:0 / visibility:hidden),
+  // so scrollHeight would read 0. Briefly unclamp it off-screen to measure the
+  // real content height, then restore the closed styles.
+  const el = contentRef.value
+  const original = {
+    maxHeight: el.style.maxHeight,
+    visibility: el.style.visibility,
+    position: el.style.position,
   }
+  el.style.maxHeight = 'none'
+  el.style.visibility = 'hidden'
+  el.style.position = 'absolute'
+  const height = innerRef.value.scrollHeight
+  el.style.maxHeight = original.maxHeight
+  el.style.visibility = original.visibility
+  el.style.position = original.position
+  bodyHeight.value = height
 }
 
 watch(isOpen, (open) => {

frontend/src/components/profile/UserProfile.vue

@@ -293,6 +293,7 @@ function onImageChange(id: string | null) {
     uploadLocalImage()
   } else {
     localImageFile.value = null
+    imageId.value = id
     saveImage(id)
   }
 }

frontend/src/tutorial/steps.ts

@@ -604,7 +604,7 @@ export const stepRegistry: Record<string, StepDef> = {
     placement: 'auto',
     next: 'chore-schedule',
     ctaLabel: 'Next',
-    anchorSelector: '[data-tutorial="chore-edit-points"]',
+    anchorSelector: '[data-tutorial~="chore-edit-points"]',
   },
   'chore-schedule': {
     id: 'chore-schedule',
@@ -666,7 +666,7 @@ export const stepRegistry: Record<string, StepDef> = {
     placement: 'auto',
     next: 'routine-schedule',
     ctaLabel: 'Next',
-    anchorSelector: '[data-tutorial="routine-edit-points"]',
+    anchorSelector: '[data-tutorial~="routine-edit-points"]',
   },
   'routine-schedule': {
     id: 'routine-schedule',