xuang7 opened a new pull request, #5104: URL: https://github.com/apache/texera/pull/5104
**Demo video** (2 min, onboarding journey): basics component, first workflow, agent, trophy shelf. https://github.com/user-attachments/assets/ca974e3c-99bb-4db7-a6eb-cf6ade2df475 ### Motivation New users land in the Texera workspace and face a dense canvas-and-panels UI with no in-product guidance. The only path to fluency today is reading external docs, watching recorded videos, or asking an instructor in person — high friction for new user onboarding. To address this gap, this PR introduces a self-contained, opt-in onboarding tutorial that meets users inside the workspace they actually use: short 1–2 minute guided tours, hands-on build flows, an always-on AI tutor, and a trophy shelf to make progress visible. ### Changes This PR ships three pieces that together turn first-time workspace use from a doc-reading exercise into a guided, interactive experience. New users can go from "where do I click?" to a working visualization in minutes without leaving the page, get unstuck via an in-context AI tutor when the spotlight isn't enough, and have a visible reason to come back and finish the flows. 1. **Tutorial tour mode** (driver.js-powered, 1–2 min, multiple difficulty levels, resumable) - Guided spotlights highlight real UI elements and auto-advance when the user performs the expected action, so the tour feels like doing rather than reading. - Four flows ship out of the box: a workspace orientation with optional per-toolbar deep dives, two hands-on build flows for first CSV-to-chart pipelines, and a public-workflow explore path. Difficulty scales from quick orientation to full pipeline. - Versioned localStorage progress means users can close the tab mid-tour and resume exactly where they left off, with a single config flag to disable the entire feature in production. 2. **Argus, an all-seeing AI tutor** (in-context, can act on the canvas) - A peacock-feather-eye mascot lives next to the canvas with idle, thinking, cheer, and wave states, so the tutor feels alive rather than static. - Free-form chat backed by the existing agent-service answers questions about the current step in context. - Action directives let Argus drop operators directly onto the canvas instead of only describing them. 3. **Trophy shelf** (per-flow badges plus bonus achievements, makes progress visible and replayable) - Micro-rewards on each step advance (sparkles and XP) for moment-to-moment feedback. - Per-flow badges plus bonus achievements for completing all flows or speed-running them, shown in a flip-card trophy shelf. - Locked and coming-soon flows appear in the same shelf so users see what's next. ### Demos <img width="1522" height="823" alt="tours" src="https://github.com/user-attachments/assets/809b0752-bd58-418e-88ec-1ca71d0e8de6"; /> *Screenshot 1: tour selection* <img width="1524" height="831" alt="step-by-step-tour" src="https://github.com/user-attachments/assets/d60ac4cd-0d01-4419-b08e-6f65a8dc0c02"; /> *Screenshot 2: step-by-step guided tour* <img width="1522" height="765" alt="persist-tour" src="https://github.com/user-attachments/assets/3610a02b-3fb7-4d69-a3d7-f376d7ffc083"; /> *Screenshot 3: resume popover after returning mid-tour* <img width="367" height="529" alt="ai-tutor" src="https://github.com/user-attachments/assets/d31f8d61-3b96-44b6-85f3-74db774d362f"; /> *Screenshot 4: Argus AI tutor chat interface* <img width="377" height="858" alt="trophy-shelf" src="https://github.com/user-attachments/assets/8f32a785-b26c-4f22-89b3-3eb301066296"; /> *Screenshot 5: trophy shelf with earned badges and coming-soon flows* ### Tests 20 new tests, all passing locally: - `tutorial-progress.spec.ts` (7 cases): load/save round-trip, legacy-flag migration, stale-schema reset, malformed-JSON fallback. - `flows-integrity.spec.ts` (13 invariants over the FLOWS registry): unique flow + badge ids, valid `skipToStep` targets, intact `chainTo` / `prerequisites` references, branching layout for `overview-workspace`. - `workspace.component.spec.ts`: `tutorialEnabled` getter passthrough. ### Future improvements - Polish: clean up unused styling and components from this initial pass. - More tours: add a platform-overview tour (hub, dashboards, account) and additional content beyond the four workspace flows shipped here. `build-ml` (Logistic Regression on prebuilt workflow) and `hub-tour` stubs are already in place. - Dynamic story generation: The current version highly relies on the frontend source — step selectors and copy are written against today's HTML, so any UI change may break a flow. Future work can introduce an agent that generates tour content automatically from the frontend source (component metadata, route map, form schemas), keeping tours in sync with the UI as it evolves. - Tighter agent integration with tours: Argus is currently separate from the tour flow — users have to switch contexts to ask questions. Future work can embed the agent into individual steps so it can proactively explain, hint, or assist within the tour itself. The action vocabulary can also expand beyond `add_operator` to `connect`, `configure`, `run`, etc. - Production LLM setup: LLM creds sourced from local LiteLLM; production needs the operator-hosted proxy or equivalent. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
