docs: sync landing page with current Marreq SPA (traceability, matrix filters, reports, API) #1

Summary

Audit of ReqMan_webpage / MarreqSW.github.io landing site (index.html) against the current Marreq application and in-repo docs (MarreqSW/Marreq).

The site is mostly aligned with Marreq (React SPA, namespace routes, groups, comments, baselines, MCP, semantic search, 3-crate backend). Several areas are incomplete, slightly wrong, or missing newer UI features shipped in the main repo.

Upstream reference: Marreq README, docs index, HTTP API contract, in-app Help page.

What is already in good shape

• Product description: Rust/Rocket/PostgreSQL, marreq-server vs marreq-cloud
• Core features: multi-project, requirements/verifications, matrix, reviewers, comments, version diff, baselines, approval workflow, MCP modes
• Groups mentioned (feature list)
• Quick Start: docker compose, marreq-core/scripts/db_setup.sh, cargo run -p marreq-server, Vite on :5173, Docker SPA on :8080
• User manual: namespace routes like /{namespace}/{project-slug}/requirements
• Screenshot script uses /alice/space-project and /catalog/categories
• Links to Marreq GitHub, INSTALL.md, MCP setup, etc.

High priority — add or fix (user-facing gaps)

1. Traceability graph page (major omission)

Marreq has a dedicated SPA route /traceability with two subtabs:

• Coverage — requirement ↔ verification (React Flow, suspect links)
• Hierarchy — parent ↔ child links (requirements + verifications)

Documented in-app on HelpPage.tsx, but landing User Manual only describes the table matrix (/matrix), not the graph.

Update: New manual subsection under Traceability:

• Route: /{namespace}/{project-slug}/traceability
• Subtabs Coverage / Hierarchy
• Double-click nodes to open detail
• Hierarchy filter ?kind= (requirements / verifications / both)
• Resizable canvas (drag bottom handle; height persisted per project/view)

Screenshots: Add traceability-coverage.png, optionally traceability-hierarchy.png.

2. Matrix filters (new SPA features)

MatrixPage.tsx supports:

• Status groups (pass/complete, verified, pending, fail/reject, draft, other)
• Requirement status multi-select
• Verification status multi-select
• Existing search / suspect-only / column sort

Update: Expand “Traceability Matrix” manual + feature bullet.

3. Reports SPA page (underdocumented)

Route: /{namespace}/{project-slug}/reports

In-app sections: Coverage, Matrix, Data quality, Workflow, Baseline diff, plus links to classic .xls exports.

Update: Add User Manual section for Reports; clarify SPA analytics vs classic Excel downloads.

4. Project Settings and Catalog

Current SPA routes:

Landing page still reads like separate “categories/applicability pages” without the catalog hub or Settings for reviewers.

Update: Document catalog routes; document Settings for reviewers (partially in features, not in manual).

5. Groups — feature only, no manual

Features list has one Groups bullet; no user manual for:

• /groups, /groups/new, /groups/:id, members, roles (Owner/Maintainer/Contributor/Viewer)

Update: New “Groups” manual section + optional screenshot.

6. Import section is misleading

Landing page says Excel import via “project import flow” in the Web UI.

In the React SPA, bulk Excel / ReqIF import is still classic-only (see Marreq HelpPage.tsx: “ReqIF import/export, bulk Excel import … remain classic-only”).

Update: Split Import into:

• SPA: no bulk import (today)
• Classic UI: Excel, ReqIF, bulk flows

7. Comments on approved versions

Landing page says add-comment form is hidden when version is approved and lock is on. Backend supports LOCK_APPROVED_VERSION_COMMENTS; React edit UI behavior should be verified and docs aligned with actual SPA.

8. Cloud mode auth (missing from landing page)

Marreq cloud binary adds:

• /register, /verify-email, /forgot-password, /reset-password
• GET /api/meta/deployment drives login UI

Quick Start focuses on marreq-server + alice only.

Update: Short “Deployment modes” box: server vs cloud, self-registration, email verification.

Medium priority — API reference on index.html

The API section is useful but incomplete vs Marreq docs/developer/http-api-contract.md.

Add or expand:

Fix examples block:

• curl http://localhost:8000/api/requirements — needs session or Bearer
• curl -O http://localhost:8000/requirements.xls — classic HTML route, not /api; needs session
• Prefer linking to http-api-contract.md instead of stale curls

Medium priority — screenshots & capture tooling

Gallery today: dashboard, requirements, matrix, requirement-detail, verifications, categories.

Missing captures:

• Traceability graph (Coverage / Hierarchy)
• Baselines list or detail
• Reports
• Matrix with filters visible
• Groups
• Settings (reviewers)
• Login (optional)

Stale paths in screenshots/README.md and scripts/capture-screenshots.js comments:

• ./backend/scripts/db_seed.sh → ./marreq-core/scripts/db_setup.sh --seed
• cargo run -p marreq → cargo run -p marreq-server

Extend CAPTURES in scripts/capture-screenshots.js, e.g.:

{ name: 'traceability', url: `${PROJECT_BASE_PATH}/traceability`, ... },
{ name: 'baselines', url: `${PROJECT_BASE_PATH}/baselines`, ... },
{ name: 'reports', url: `${PROJECT_BASE_PATH}/reports`, ... },

Lower priority — polish & consistency

Implementation checklist

User Manual (index.html)

• Traceability graph (/traceability, Coverage/Hierarchy, resize, ?kind=)
• Matrix filters (status groups + req/ver status chips)
• Reports SPA
• Settings + Catalog routes
• Groups (/groups/...)
• Help page
• Correct Import (classic vs SPA)
• Cloud vs server login/registration

Features section

• Traceability graph + resizable canvas
• Matrix advanced filters
• In-app Reports dashboard
• Project catalog management in SPA

API Reference

• Auth + meta + dashboard + groups + reviewers
• Fix curl examples or replace with link to http-api-contract

Screenshots

• Refresh script + README paths
• Add new captures (traceability, baselines, reports, …)

Resources

• Link to Marreq docs/user-manual/user-manual.md and docs/developer/http-api-contract.md

Files likely touched

• index.html
• scripts/capture-screenshots.js
• screenshots/README.md
• Optionally README.md