Product Journey Investigation Workspace

Build Wayfinder, a responsive product-usage workspace for a product designer investigating teammate invitations in Relayboard, a fictional collaborative briefing tool. The buyer job is to select a journey stage, inspect the exact sessions behind its count, isolate repeated role choice, and copy an editable next-check note grounded in those events. Return one complete standalone HTML document with internal CSS and JavaScript. This is a local demo, with no analytics connection or backend.

Inputs and customization
- Keep PRODUCT_NAME (Wayfinder), ANALYZED_PRODUCT (Relayboard), STAGES, SESSIONS and DEFAULT_QUESTION in one clearly named configuration block. A buyer can replace the brand, stage labels, event sequences, question and palette without changing the rendering logic. Session IDs must be unique. Event offsets are elapsed seconds within a session, not wall-clock timestamps.
- STAGES, in order: Workspace created; First brief; Invite teammate; Permission choice; Shared review; Return visit. Reopening a role menu is a separate event, not another unique session or stage completion. Define the Permission loop as a session containing Role menu reopened.
- Use exactly six fictional sessions, with these ordered offset/event pairs:
  S-104: 0 Workspace created; 24 First brief; 52 Invite teammate; 60 Permission choice; 76 Role menu reopened; 92 Invite dismissed; 108 Returned to brief.
  S-118: 0 Workspace created; 18 First brief; 40 Invite teammate; 49 Permission choice; 68 Role menu reopened; 89 Returned to brief.
  S-126: 0 Workspace created; 31 First brief; 63 Invite teammate; 70 Permission choice; 88 Role menu reopened; 111 Shared review.
  S-130: 0 Workspace created; 16 First brief; 35 Invite teammate; 42 Permission choice; 59 Shared review; 180 Return visit.
  S-141: 0 Workspace created; 28 First brief.
  S-152: 0 Workspace created.
- DEFAULT_QUESTION: Would plain-language role descriptions help teammates choose a role without reopening the menu?
- Label the dataset Six fictional sessions. Counts describe this fixture only. Never invent people, quotes, live timestamps, statistical significance, conversion lifts, lost revenue, causal explanations or customer proof. Do not call a session abandoned just because its fixture ends.

Composition and visual direction
Use a quiet pale-blue analysis surface (#edf3f8), white working areas, navy ink (#16344b), deep blue selected states (#245d87), a muted coral branch accent (#ae4e3e), and light blue rules (#c8d7e2). Pair an expressive but legible system humanist sans for headings with neutral sans body text and tabular numerals for counts and offsets. No external fonts. Keep body copy at least 14px, primary controls at least 44px high, and strong visible focus outlines.
Make the journey itself the visual anchor: six connected, clearly labeled semantic stage buttons, each showing its computed unique-session count. Use decreasing horizontal bar lengths to encode the counts; explain that the bars count unique sessions reaching each stage. Do not use a decorative river, Canvas, SVG, sidebar, metric-card grid, gradients or fake chart. Under the journey, create a session list and event inspector, followed by an evidence-to-question notebook. The selected stage, selected session and branch filter must be visually distinct and stated in words. Keep the header concise: Wayfinder, Investigate the invitation loop, and the fictional-data disclosure.
At 1440x900 the stage path and a useful session sequence should appear together. At 1024 and 768px wrap stages without clipping. Below 740px use a compact two-column stage path followed by the filter, session chooser, full selected-session sequence and notebook. At 390 and 320px use natural vertical scrolling, no horizontal overflow or tiny compressed text. Do not force the whole product into one screen. Use whitespace and alignment instead of borders around every sentence.

Required behavior
1. Initially select Permission choice and S-104. Compute counts from unique session IDs: 6, 5, 4, 4, 2, 1. Selecting any stage updates the session list to sessions containing that event, the matching count, and the inspector. Retain the selected session only if it still belongs; otherwise choose the first result. Display the entire ordered sequence with mm:ss offsets and visibly mark the selected stage. Use real buttons with aria-pressed for stage/session choices.
2. A checkbox labeled Permission loop only composes with the selected stage. There are three loop sessions overall, all four permission sessions include S-130 only when the checkbox is off, and Shared review plus loop yields only S-126. Return visit plus loop has zero results; clear the inspector and provide Clear loop filter. Keep all six overview stage counts for the active dataset unchanged by this session-list filter, and label that scope. Show both matching-session count and whether the loop filter is on. One data-preview-action marker belongs on this checkbox; one data-preview-ready marker belongs on the settled workspace.
3. Session buttons open real, distinct full event sequences. Do not substitute a toast or selection message for event detail. The evidence notebook states the overall fixture observation: Three of four sessions reaching Permission choice reopened the role menu; one of those three later reached Shared review. This is an observation, not a cause. Keep this dataset-wide observation explicitly separate from the filtered-session count.
4. Provide an editable textarea labeled Next question, a Copy investigation note button, and a selectable plain-text note preview. Compose the note from dataset disclosure, selected stage, loop filter, matching session IDs, selected session's complete sequence, dataset-wide observation and the current question. Trim and require a nonempty question of at most 240 characters; show an inline error and focus the textarea for invalid input. Copy the exact preview text. If clipboard permission is denied, show a truthful message to select and copy the preview manually; never show Copied on failure. Editing the question updates the preview. Selection/filter changes preserve the draft. Do not imply a note has been saved externally. All changes reset on reload; label this behavior.
5. A labeled Sample selector provides Six fictional sessions, Empty sample and Failed sample. Empty sample sets every stage count to zero, clears the list/inspector and observation, disables copying and explains how to restore the six-session sample. Failed sample shows a visible local loading state for 400ms, then a Failed to load demo sample message and Retry sample button. Hide stale session data/notes during loading/error; Retry restores the six-session sample with the question draft preserved. Switching samples during loading cancels the old completion. Disable copy during loading/error/empty. No network request or random failure.
6. Use async/await for asynchronous work, semantic headings/labels, one polite status region for material changes, logical keyboard order and readable contrast. All controls work without a mouse. No automatic looping animation; reduced-motion and Save-Data retain the same usable settled states. Use textContent for user-controlled strings. Include one quiet Source prompt link to /prompts/app-dashboards-app-dashboards-prompts-for-operations-product-usage-analytics-20260705-free/. Do not add dead navigation, external services, localStorage, purchases or tracking.

Acceptance checklist
- The six overview counts are 6/5/4/4/2/1, based on unique sessions; S-104 has seven correctly timed events and S-130 includes Return visit at 03:00.
- Selecting Shared review and enabling Permission loop only shows S-126 and its complete sequence. Selecting Return visit under that filter shows an honest zero state; clearing it restores S-130.
- Empty sample clears all six counts and all stale evidence. Failed sample shows loading, then a retryable error; rapid sample switching cannot resurrect stale results.
- A customized question survives filter/sample/retry changes. Blank or overlong input cannot copy. Successful copy matches the visible note; denied clipboard access gives a usable manual-copy fallback.
- Desktop, tablet, 390px and 320px layouts show legible stage labels and usable event details without overflow. Keyboard focus is visible, selected state is announced, and reduced-motion/Save-Data keep every control usable.
- No network calls, fabricated user outcomes, causal claims, placeholder panels or human-review claims. Return only the functioning HTML product.