Representative-Session Journey River

Create Wayfinder, a responsive product-usage analysis workspace for the product team behind Relayboard, a fictional collaborative briefing tool. The team wants to understand where a sample journey branches after a teammate invitation, inspect representative session sequences, and write a testable next question. All events, counts, session identifiers, and durations are illustrative demo data; do not present them as live analytics, statistically representative findings, customer proof, or a business outcome.

Do not build a dashboard of conversion cards and charts. Use one continuous journey river as the primary surface. It flows through Workspace created, First brief, Invite teammate, Permission choice, Shared review, and Return visit, with a named Permission loop friction branch. Pair the river with a semantic event table, one representative-session drawer, an evidence/hypothesis strip, and a sample selector. Canvas is allowed for the deterministic river only when the complete branch and event counts remain available as text.

Use this exact product content: WAYFINDER; Follow behavior, not vanity.; Illustrative event sample · 48 demo sessions; Workspace created; First brief; Invite teammate; Permission choice; Shared review; Return visit; Inspect permission loop; 11 sample journeys entered branch; Representative sessions; S-104; S-118; S-126; Role menu reopened; Invite dismissed; Returned to brief; Observed pattern · not a conclusion; People pause after role choice.; Next check; Test plain-language role labels. Do not invent activation lifts, conversion rates, revenue, cohorts, retention claims, customer identities, causal conclusions, significance, or recommendations presented as fact.

Use river paper #eef2ec, deep current #173c58, evidence blue #266fa4, branch coral #e05d4e, marker yellow #e8c64a, reed green #56816a, and ink #16201f. Pair a wide utilitarian display with a neutral sans and mono event/session notation. Use changing channel width to encode sample flow, calibrated event gates, current direction marks, and one deliberate branch rather than decorative waves. Avoid sidebars, repeated cards, funnel clichés, donut charts, gradients, glowing nodes, stock illustrations, and CSS/SVG rivers.

Inspect permission loop is the deterministic five-second action. From 0–1.0 seconds Permission choice engages and the interface announces that the illustrative branch is being isolated. From 1.0–2.5 seconds the fixed river trace advances from Invite teammate into Permission loop while the semantic table marks 11 sample journeys entered branch. From 2.5–3.8 seconds S-104, S-118, and S-126 reveal their representative event sequences without names or fabricated quotes. From 3.8–5.0 seconds Observed pattern · not a conclusion, People pause after role choice., and the Next check test lock into place. The final view must be stable and replayable.

Include overview, event-selected, branch-tracing, representative-sessions-ready, empty-sample, stale-sample, loading, error, hypothesis-open, visible-focus, reduced-motion, Canvas-fallback, and table-only states. The sample selector can switch between 48 demo sessions and an honest empty sample. Keyboard users can inspect every event and representative session through semantic controls. Announce branch selection and evidence readiness, not every animation frame. Put one data-preview-ready marker on the settled workspace and exactly one data-preview-action marker on Inspect permission loop.

At 960×600, keep the full river, all event gates, branch label, representative sessions, and evidence strip inside the first 16:10 viewport. Below 740px, order the action, semantic event path, representative sessions, evidence/hypothesis, then a simplified Canvas river; do not hide the meaning inside the graphic. Keep session identifiers and event labels intact at 320px. With prefers-reduced-motion or Save-Data, render the final permission branch and evidence immediately, stop all current animation, and preserve sample and session controls.

Return one standalone responsive HTML document using internal CSS and JavaScript. Use no framework, external analytics SDK, network request, live customer data, stock chart, placeholder block, SVG/CSS illustration, random animation, lorem ipsum, or explanatory prose outside the product. Include one unobtrusive source-prompt link and label every analytic value as illustrative or demo data.