[Demo] End-to-end demo walkthrough page
Goal
Create an interactive guided tour page at /demo that serves as the entry point for new visitors to understand SciDEX's five-layer architecture. The page will walk users through a concrete example: starting with a hypothesis, viewing the debate that produced it, exploring evidence and tools used, navigating the knowledge graph, and checking governance/quality metrics. This provides an intuitive onboarding experience that shows rather than tells.
Acceptance Criteria
☐ Create /demo route in api.py that renders an interactive tour page
☐ Tour has 5 distinct steps corresponding to the five layers (Agora, Exchange, Forge, Atlas, Senate)
☐ Each step highlights a real example from the database (hypothesis, debate, tool execution, KG entity, quality metric)
☐ Interactive navigation: arrows/buttons to move forward/back through steps
☐ Visual highlights/callouts to draw attention to key elements on each step
☐ Responsive design that works on mobile and desktop
☐ Tour starts automatically when page loads or has clear "Start Tour" button
☐ Link from homepage to /demo for discoverability
☐ Page loads in <2 seconds and returns 200 status
Approach
Select Example Data — Query database for a high-quality hypothesis with complete debate, tool usage, and KG connections
Design Tour Structure — 5-step progressive disclosure matching the five layers
Implement /demo Route — Add FastAPI endpoint in api.py
Build HTML Template — Create interactive tour page with step navigation
Add Visual Highlights — Use CSS/JS to highlight key elements at each step
Test Navigation Flow — Verify all steps work and examples are compelling
Link from Homepage — Add prominent "Take a Tour" button to main page
Verify Performance — Check page load time and HTTP statusWork Log
2026-04-02 02:15 PT — Slot 12
- Task assigned: End-to-end demo walkthrough page (task d16-09-7924D488)
- Created spec file
- Starting implementation...
Verification — 2026-04-25 01:42:00Z
Result: PASS — All acceptance criteria already met on main
| Criterion | Evidence |
|---|
| /demo route exists | @app.get("/demo") at api.py:63945 — returns 200 OK |
| 5 layer sections present | #agora, #exchange, #forge, #atlas, #senate all found in HTML |
| TourSteps with 5+ steps | 7-step guided tour (stats + 5 layers + trace) confirmed |
| Interactive navigation | tour-btn-prev + tour-btn-next buttons present |
| Visual highlights/spotlight | tour-spotlight CSS class + overlay card present |
| Responsive design | @media(max-width:768px) and @media(max-width:480px) blocks |
| Start Tour button | "Start Guided Tour" button with onclick="startTour()" |
| Homepage links to /demo | /vision homepage has 3 href="/demo" links + "Take the guided tour" |
| Page returns 200 | curl confirms 200, 126KB, loads in <0.5s |
Verification — 2026-04-25 01:43:00Z
- Rebased worktree on origin/main (clean rebase, no conflicts)
- Confirmed git diff origin/main..HEAD is empty (feature already on main)
- Only
.orchestra-slot.json modified locally (branch reservation metadata)
- Task complete — feature delivered by prior commit