Lovable dashboard — GUI walkthrough / reusable case library

PARTIALLY SUPERSEDED 2026-07-23: Malcolm’s 07-17→07-22 changes (Simplified layer deleted, Jamie mock decommissioned, claim↔verification linking, ID obfuscation, admin revamp, Explore Fibre) invalidated the HIGH-priority cases below. Re-recordings + new bugs + capture method (local sandbox via Playwright — live preview no longer automatable due to Chatbase widget) live in rerecord-2026-07-23/README.md. Cases 2 (producer) and 5 (settings) below remain valid.

Captured 2026-07-16 via Claude-in-Chrome on the LIVE Lovable app “FibreTrace Prototype Studio” (project 43c4ae28-46ad-4b8a-aff8-d89bc0b39576), driven inside the user’s logged-in Chrome (the editor’s embedded preview, already authenticated). First GUI pass — 3 core actors only (per T75 scope). This is a REUSABLE GUIDE: next time the user requests a walkthrough, follow the numbered steps in each case below.

Recordings use the extension’s gif_creator (browser-native, one GIF per journey, 50-frame cap). NOT rec-chrome screen video — flagged to user; switch on request.

How to reach the app + switch persona (do this first, every time)

1. Open https://lovable.dev/projects/43c4ae28-46ad-4b8a-aff8-d89bc0b39576 in the user’s Chrome (must be logged into Lovable). The right pane is the live, authenticated app.
2. In the app top bar, click “Demo” (top-center) → the Demo Controls panel opens (screenshots/00-demo-controls-persona-switcher.jpg).
3. Under SWITCH CUSTOMER TYPE, click a persona card. The ENTIRE app re-renders as that company (persona is derived from company data — no role field; confirmed §1.5 of ../2026-07-16-code-resolved-open-questions.md).

Demo Controls panel contents:

• Toggles: DEVELOPER TOOL TIPS, SHOW AS WIREFRAME.
• ACTIONS: Website Directory, SDU Automation, EWR Automation, Scanner Demo, Scanner Demo v2, Admin.
• SWITCH CUSTOMER TYPE (6 personas): Fibre Producer GIN (Tier4) — SUNDOWN, Fibre Producer rPET (Tier4) — ACME rPET Recyclers, Apparel Manufacturer (Tier1) — ACME Apparel Tier1, Apparel Manufacturer (Tier2) — ACME TIER2, Retail Brand (Tier0) — TARGET CORP, Program Owner — ACME Program Office.

SAFETY when driving: don’t mutate demo data you did NOT create. On PRE-EXISTING records, walk + screenshot only — Link & propose, Publish, Confirm, Activate, Add Certificate, Make a claim, delete/archive icons all change demo data; ask the user before the FIRST create in a fresh flow. EXCEPTION: records YOU created are fully yours to CRUD (create/read/update/delete) for that flow — mark them with the owner marker nia- prefix / -nia suffix (system-generated IDs: put nia- in the notes field instead — see .claude/rules/user-test-record-naming.md; supersedes the old NF- example) so self-created test data stays identifiable + disposable. Deliberately-authorised E2E flows (cases 10-11) are also allowed.

Case 1 — Tier0 Retail Brand (TARGET CORP, “Jamie Peel”) — claim CONSUMPTION side

GIF: 01-tier0-brand-journey.gif · sidebar: Home · Fibre Programs · Supply Chain · Purchase Orders · Ready to Claim · Claims · Verification History · Data Connections · Settings

Case 2 — Tier4 GIN Fibre Producer (SUNDOWN, “Luke Wills”) — PRODUCTION side

GIF: 02-tier4-gin-producer-journey.gif · sidebar (different): Home · Production Records · SDU Device Status · Verification History · Settings (NO orders/claims/supply-chain)

Case 3 — Tier1 Apparel Manufacturer (ACME Apparel Tier1, “Sarah Chen”) — claim ORIGINATION side

GIF: 03-tier1-manufacturer-journey.gif · sidebar (different): Home · Link to PO · Verification History · Settings

The happy-path claim flow, mapped across the 3 personas (from GUI)

1. Producer (SUNDOWN, Tier4) logs production + SDU scans → Production Records (274 MT produced, scans “completed”).
2. Manufacturer (ACME Tier1) receives retail POs → Link to PO: attaches verified scans to a brand’s PO and Link & propose → PO moves to “Awaiting brand confirmation”. Can Add Certificate at this step.
3. Brand (TARGET CORP, Tier0) sees the proposed PO → Ready to Claim: Activate · N MT (partial allowed, Allocated vs Remaining) → confirms. Rejection sends it back to the manufacturer as “Rejected — revise”.
4. Confirmed → evidence pack published (manufacturer “Confirmed evidence packs = 13”; brand Claims shows the 3 packs Trade/Sustainability/Procurement + share).
5. Brand Supply Chain reconstructs the full tier ladder from the shipping references on those scans (partners named, non-partners masked).

This matches the code analysis in ../2026-07-16-code-resolved-open-questions.md (§2.1-2.5, §1.1-1.4) end-to-end.

Pass 2 — deep dives (2026-07-16, cont.)

The “Link verifications & propose claim” wizard (Tier1 manufacturer core action)

GIF: 04-tier1-manufacturer-deep-linkwizard-verifhistory-settings.gif. Opened from Link to PO → Link & propose. Viewed all 3 steps then Cancelled (no commit).

Verification History (/verifications, shared across personas)

t1-06-verification-history.jpg. Stats: verifications all-time / total scans / facilities scanned. Tabs: My verifications · Shared with me · Shared by my company (= partner-to-partner session sharing). Filter “Needs shipping link”. Table: Verification ID (+copy/lock), Pigment ID, Facility, Facility confidence, Direction (Inbound/Outbound), Shipper, Shipping ID (the shipment references chain-walk joins on, §1.1). Sub-item “Groups” (legacy verification-sharing groups).

Shared Settings surfaces (/settings/*)

GIF: 05-shared-settings-scanners-partners-certificates-dataconnections.gif. Sub-nav: Account · Company · Teams · Facilities · Scanners · Partners · Certificates · Notifications · Data Connections.

• Account (shared-settings-account.jpg): personal details + blockchain public key + Language + “Show in-app guides” toggle + password (mock update §mock-c).
• Scanners (shared-settings-scanners.jpg): device list (Serial/Facility/Last-used-by); “Buy scanner” + “Modify” = mailto (mock §mock-a).
• Partners (shared-settings-partners.jpg): “Once connected, you can share verification sessions and collections both ways.” Connected partners w/ confidence + Disconnect; invite by company code. → partnership is the prerequisite for supply-chain visibility + sharing.
• Certificates (shared-settings-certificates.jpg): “Active certificates automatically appear on evidence packs for the facilities they cover.” Issuer/Reference/Validity/Facilities/Status (Active/Expired). → cert→pack auto-attach by facility.
• Data Connections (shared-settings-data-connections.jpg): “Enable a public URL or webhook for each approved claim.” Empty until a claim exists. “Dedicated API integrations — Coming soon” (ReTraced/TrusTrace/TextileGenesis/FairlyMade/Worldly/SAP/Centric = “Notify me” mock) + API keys. → this is CLAIM-pack sharing, SEPARATE from the session-level sharing in Verification History (answers “sharing vs data-connections”: currently two distinct surfaces).
• Not individually walked (standard CRUD): Company, Teams, Facilities, Notifications.

Case 6 — Program Owner (ACME Program Office, “Priya Owner”)

GIF: 06-program-owner-journey-plus-404bug.gif · sidebar: Home · Program record · Program uptake · Documents · Certificates. Persona parked-for-Malcolm on the RECORDING-scope, but explored here for understanding per the “explore all” goal.

Case 7 — Tier0 Brand DEEP: capacity model + claim creation + evidence pack

GIF: 07-tier0-brand-deep-claimposition-makeclaim-evidencepack.gif.

• Fibre Programs → Claim Position (/claim-position, t0-06): the credit/capacity model visualized. Capacity flow Ceiling 1,500 → Activated 364.8 → Reserved 450 → Available to claim 104.3 → Pending 35 → Claimed 225.5 MT. “What you can say” (approved claim statements) vs “Not yet supported”. Buttons Make claim + Add reservation → a direct (non-PO) claim path EXISTS in the brand UI here.
• Make a claim wizard (opened, stepped, closed — no submit): “Retire reserved capacity and link supporting evidence.” STEP 1 Program & quantity (t0-07, “Remaining available capacity” ceiling) → STEP 2 Select evidence (t0-08: pick Purchase orders [optional] + Scan sessions [required *]) → STEP 3 Review & submit. Confirms claim = RETIRE reserved capacity (credit model).
• Evidence pack viewer (/evidence/risk, t0-09): the claim OUTPUT. “Risk / compliance pack [Ready]” — “Internal decision-support — not for external sharing… the Regulator/customs pack presents only the scoped, outbound evidence file” (packs = different VIEWS of one evidence base, §2.4). Pack preview: PACK ID, Claim ID, Program, Fibre, Program owner, Brand, PO ref, Claim volume, Facilities contributing, Expiry, Claim status, Confidence, Generated + “View linked evidence” / “View programme detail” / supply-chain section.

Case 8 — Demo scanner simulator + Admin console

GIF: 08-demo-scanner-simulator-plus-admin-console.gif.

• Scanner Demo (Demo Controls → Scanner Demo, demo-01): a phone-framed mobile-scan simulator (DemoScanModalV2). Select facility + scan type: Test scan / Inbound (material arriving) / Outbound (material leaving). Not driven to completion (would seed a scan).
• Admin console (/admin, admin-01): opens WITHOUT a login gate (confirms Part C item 4 live). FibreTrace-internal CMS. Nav: TRACECREDITS (Fibre Programs, Program Owners, Pigment IDs, Fibre Production, Evidence Packs) · MANAGEMENT (Companies, Users, Scanners, SDU, Facilities, Licensing, Verifications data, Billing, Notifications & API, Banners, Onboarding) · INTEGRATIONS (Open Supply Hub) · CONTENT (CMS, Help pages) · SYSTEM (Global Settings). Fibre Programs table across all demo programmes.
• Admin → Global Settings (/admin/settings, admin-02): “Authentication Login Bypass” ON (“login screen is bypassed and a default user is loaded automatically”) = the root of the no-real-auth prototype behavior. Also “Demo CTA visibility” (controls the Demo button) + “Verification Groups feature” (OFF by default → explains the Groups sub-item) + Chatbase support-chat config. Admin is OUT of monet dashboard scope (per feedback_dashboard_mvp).

Case 9 — Remaining personas (rPET Tier4, Tier2 manufacturer)

GIF: 09-remaining-personas-rpet-tier2.gif.

• Fibre Producer rPET (ACME rPET Recyclers, “Bob Wilson”) (t4rpet-01): HYBRID persona — producer sidebar (Home / Production Records / Verification History) but its Home resolves to the OWNER dashboard at /owner (it owns GAN Demo 2026: producers/participants tables, reserved 100 / claimed 12 MT). Producer-sidebar + owner-home mismatch — note as a possible nav inconsistency for the hybrid case.
• Apparel Manufacturer Tier2 (ACME TIER2, “Jackie Chan”) (t2-01): identical layout to Tier1 manufacturer (PARTNER LINKING → Link to PO, Home with PO Volume Booked / Fulfilment / Open POs / Retail Partners, next actions Link/Publish). Confirms Tier1 & Tier2 share ONE manufacturer persona, differing only by data.

Case 10-11 — REAL end-to-end claim cycle (mutations executed, user-authorized 2026-07-16)

GIFs: 10-e2e-real-manufacturer-propose-claim.gif + 11-e2e-real-brand-confirm-pack-generated.gif. This is the canonical happy-path claim, run for real across two personas:

1. Manufacturer proposes (ACME Apparel Tier1 / Sarah Chen): Link to PO → PO HUNG2026071002 → Link & propose → select 1 verification → claim amount 5 MT (50%, partial) + note “Claude E2E test - safe to delete” → Link & notify brand. Result (e2e-01,e2e-02): PO moved “Awaiting evidence pack (5→4)” → “Awaiting brand confirmation (1→2)”, shown as “Proposed 5.00 MT”. No pack yet.
2. Brand’s numbers react immediately (Target Corp / Jamie Peel Home): “Volume ready to claim” 104.3 → 99.3 MT, claim coverage 68% → 70% (the 5 MT is now pending).
3. Brand confirms (Ready to Claim → HUNG2026071002 now shows “Activate · 5.00 MT” → Activate claim dialog e2e-03: shows “Proposed by sarah.chen@tier1example.com”, 5 MT, my note, 2 verifications linked → Activate claim). Result (e2e-04): toast “Claim activated”; HUNG2026071002 → Activated, Remaining 10 → 5 MT (partially_claimed), Activated count 13 → 14; banner offers Download / Copy for ESG / Share with retailer / View evidence pack.
4. Evidence pack generated (e2e-05): PACK ID EP-D0DD0958 / CLAIM ID CLM-D0DD0958, PO HUNG2026071002, Claim volume 5 MT, Status Claimed, DEMOGEC2026, owner ACME Program Office, brand Target Corp.

Confirms the full lifecycle end-to-end: propose (no pack) → brand confirm → production_claim + evidence pack generated + PO volume_claimed incremented (partial → PO stays open with remaining). Matches code §2.1-2.5 exactly.

CREATED TEST RECORDS (safe to delete): claim CLM-D0DD0958 / pack EP-D0DD0958 (5 MT on PO HUNG2026071002, DEMOGEC2026, note “Claude E2E test - safe to delete”) + the purchase_order_verifications link it created. These are the ONLY writes this walkthrough made to the demo. Delete via the Claims/Ready-to-Claim row actions or admin → Evidence Packs.

Confirmed bugs (verified LIVE in the GUI)

• Owner “View details” → 404 (/owner/programme-uptake vs registered /owner/program-uptake). Reproduced live (po-02-programme-uptake-404-BUG.jpg). One-line typo; fix upstream in Lovable so it flows down (routing is Lovable-generated).

Raw GUI observations (PARKING LOT — not yet drafted as Malcolm questions)

Per the user’s instruction, questions for Malcolm are NOT drafted until the GUI is fully explored. These are raw observations to triage in a later pass:

• Producer Home tiles all read 0 (VOLUME PRODUCED / VERIFICATIONS / ACTIVE FACILITIES / OPERATORS) while Production Records shows 274 MT + 11 records + 20 activation verifications for the same company (SUNDOWN). Looks like a Home-dashboard data-scope bug or a different metric than the label implies. VERIFY in a later pass.
• Non-partner suppliers with scans DO appear on the brand Supply Chain, masked as “Non partner company” + city/country only + “Invite partner”. This CONFIRMS the source (§1.4) but CONTRADICTS what Malcolm said in the demo (“they don’t appear, I need to check the logic”). Confirm intended rule with Malcolm.
• rPET producer is a HYBRID (producer sidebar + owner Home at /owner) — producer-nav vs owner-content mismatch; confirm intended for producer-who-also-owns-a-programme.
• Direct (non-PO) claim path is live for the brand via Claim Position → “Make a claim” (retire capacity + attach PO optional / scan session required). Nuances the earlier “PO is the only path” reading — surface to Malcolm which is canonical.
• Switching persona does not reset the route — switched to rPET while on /owner and it kept /owner; minor, but can show mismatched content briefly.
• Loading flash: brand Home briefly renders a zeroed alternate layout (“No active programmes yet”) before the rich dashboard loads — cosmetic loading-state nit, NOT a data reset (verified data intact afterward).
• (earlier) Producer Home tiles read 0 vs Production Records 274 MT for SUNDOWN — may likewise be a “today”/scope metric vs cumulative; re-verify before treating as a bug.

Coverage — status after the full “explore everything” pass (2026-07-16)

DONE this pass:

• All 6 personas walked (Tier0 brand, Tier4 GIN, Tier1 mfr, Program Owner, Tier4 rPET, Tier2 mfr).
• Key wizards opened + documented (viewed, NOT submitted): manufacturer Link & propose (3 steps), brand Make a claim (steps 1-2), evidence pack viewer.
• Scanner Demo simulator (entry), Admin console + Global Settings, shared Settings sub-pages (Account/Scanners/Partners/Certificates/Data Connections), Verification History, Claim Position.
• Live-confirmed the /owner 404 bug and the admin auth-bypass.

DONE — real mutations (user-authorized 2026-07-16): the full propose → confirm → evidence-pack cycle executed live (cases 10-11, created CLM-D0DD0958). The core write-path lifecycle is now proven end-to-end, not just viewed.

NOT walked (lower value / deliberately skipped):

• Other state-mutating actions not exercised: reject/unlink a proposal, Add Certificate at propose, brand direct Make-a-claim submit, delete/archive. (The main claim lifecycle is covered by cases 10-11; these are variants.)
• Demo ACTIONS that SEED data: SDU Automation, EWR Automation (avoided to not mutate); Website Directory, Scanner Demo v2 (not opened).
• Deep sub-pages: GIN “Activation Verifications” tab, Verification History “Groups”/collections, Settings Company/Teams/Facilities/Notifications (generic CRUD), Admin sub-pages beyond Global Settings (out of monet scope), public claim /c/:token + webhook JSON page.