SATP Demo Progress

SATP Demo Progress

Milestones

  • 1. Shell, style tokens, navigation, site introduction
  • 2. Shared primitives with scratch harness
  • 3. Protocol-map transcription, Chapter 1, and reference table
  • 4. Chapter 2 static lane diagram, animation, and controls
  • 5. Chapter 2 ledger states, captions, and scroll linkage
  • 6. Chapter 3 diagram, message cards, and field annotations
  • 7. Hash chain, signatures, rejection path, accessibility, polish, and docs
  • 8. Review pass: scroll and framing fixes, hoverable step names, user/operator hand-off in Stage 0, draft version note, extra references
  • 9. Chapter on the API1 (client application to gateway) interaction: the business API surface, how an application opens a session and activates a transfer, what it polls or receives back, and where that sits relative to Stage 0
  • 10. Chapter on the adapter (bridge) layer: how a gateway talks to a specific ledger, leaf/bridge plugins, and a worked example taken from the cacti-demos subrepo
  • 11. Chapter tying it all together: the Cacti CBDC demo end to end, two applications, two gateways, two ledgers, one transfer, plus the recovery/rollback story

After each milestone, record changed files, checks performed, browser pages exercised, console errors, and unresolved questions. Stop after the requested milestone.

Scaffold

  • Status: complete
  • Files: standalone page shell, style tokens, JavaScript entry points, primitive factory contracts, data placeholders, spec-derived seed values, icon sprite, and harness
  • Open question: exact Cacti v02 message objects must be transcribed from upstream source before populating messages or field annotations

Milestone 1 — shell, style tokens, navigation, site introduction

  • Status: complete
  • Changed files:
    • satp-demo/index.html — page metadata and social tags, navbar/footer mirrors of _includes/navbar.html and _includes/footer.html, chapter navigation, theme toggle markup, full site introduction (what the page is, the transfer path it follows, how to read it, illustrative-data and accessibility expectations), and concept-first chapter headings with placeholder mount points
    • satp-demo/assets/css/satp-tutorial.css — complete “Light Organic Editorial” token set in one :root block (surfaces, ink, semantic stage/role/network accents, radius, shadow, spacing ramp, type scale, motion), “Night Paper” dark variant under both prefers-color-scheme: dark and [data-theme="dark"], paper texture washes, header and chapter-nav styling, introduction layout, footer, focus rings, responsive rules down to 380px, and prefers-reduced-motion handling
    • satp-demo/assets/js/satp-tutorial.js — theme cycling (system → light → night) with localStorage persistence and updated ARIA labels, IntersectionObserver chapter-nav highlighting, and chapter-controller mounting when controllers exist
    • satp-demo/plans/progress.md — this record
  • Verification:
    • HTML, CSS and JavaScript syntax checked with locally available tools
    • Page opened over file:// and served locally; no console errors, no network requests to third parties
    • JavaScript disabled: introduction, chapter headings, navigation, banner and footer all render and remain readable; theme toggle is hidden because it cannot function
    • Checked at 380px, 768px and 1440px widths; light, dark and forced-theme rendering
  • Open questions:
    • none for this milestone

Notes

  • No fonts are loaded from a CDN; Fraunces / IBM Plex Sans are requested by name and fall back to system serif and sans faces.
  • The navbar and footer here are static copies. When _includes/navbar.html or _includes/footer.html change, update satp-demo/index.html to match.

Milestone 8 — review pass

  • Status: complete
  • Changed files:
    • assets/css/satp-tutorial.css — Chapter 2 narration is now a framed, independently scrollable panel matched to the diagram box height; sticky columns are bounded so they cannot be cut off; hover/focus tooltips for step names; Chapter 3 hash-chain block spans both columns; .stage-note and prologue arrow styling
    • assets/js/chapter-02-stages.js — Alice (user) lane and the two pre-protocol hand-offs (user to application, application to gateway); stage badge no longer carries the Cacti-extension caveat, which moved to a note under it; narration height sync and scroll observation rooted in the narration panel
    • assets/js/primitives/lane-diagram.js — optional prologue hops drawn left of the first protocol column, with the column grid shifted to make room
    • assets/js/chapter-01-table.js — step names are hoverable and focusable with a tooltip describing the step; caption links SATP_PROTOCOL_MAP to types/satp-protocol.ts upstream
    • assets/js/chapter-03-messages.js — illustrative-data notice removed
    • index.html / build-index.py — states that the modelled protocol is draft version 3 as implemented by SATP Hermes, describes the operator hand-off in Chapter 2, and adds the SATP Hermes talk and Cacti workshop recordings to the references
  • Verification: rebuilt index.html, opened over file://, no console errors, no third-party requests beyond the Google Fonts stylesheet; checked scrolling of both chapters at 1280x900 and at 420px

Milestone 9 — chapter reorder and second review pass

  • Status: complete
  • Changed files:
    • index.html — chapters reordered: Chapter 1 (why it is hard) now ends with the hash-chain explainer “What ties the four messages together”; Chapter 2 is the Stage 1 message explorer; Chapter 3 is the whole-conversation flow diagram plus the 36-step reference table; new scaffold chapters 4 (API1) and 5 (adapter layer); chapter nav updated to five entries; Stage 0 is described as being specified in draft-avrilionis-satp-setup-stage instead of “not part of the core draft”
    • assets/js/chapter-01-table.js — wire message names are hoverable/focusable with a placeholder message-format tooltip (common envelope + payload); caption updated
    • assets/js/chapter-02-stages.js — shorter actor role captions so the gateway boxes no longer overflow their rounded rectangles; stage note links the IETF setup-stage draft
    • assets/js/chapter-03-messages.js — hash-chain block can be mounted into a separate container (#hash-chain-anatomy in Chapter 1)
    • assets/js/satp-tutorial.js — passes the Chapter 1 hash-chain container
    • assets/css/satp-tutorial.css — “The transfer we are following” column is no longer sticky (it used to run past the viewport and cover the prose below); styles for in-chapter section headings and the message-format tooltip
    • assets/data/satp-stages.json — Stage 0 note points at the IETF setup-stage draft
  • Verification: opened the built page over file:// at 1280x1400, no console errors; checked the reordered chapters, the table hover tooltips, the actor boxes and the previously overlapping scenario card

Milestone 10 — Chapter 4: API1 visual explainer

  • Status: scaffold in place, content pending
  • Plan: walk the business-logic API between a client application and its own gateway — transfer request, session id, status polling, receipt — using the lane-diagram primitive.

Milestone 11 — Chapter 5: adapter layer explanation

  • Status: scaffold in place, content pending
  • Plan: bridges, connectors and wrapper contracts; one protocol step landing on Besu and on Fabric through two different adapters.

Milestone 12 — Stage 3 hand-off, Chapter 6 scaffold, blockchain-style hash chain

  • Status: complete
  • Changes: Stage 3 now shows the receiving gateway notifying Bob’s application after ACK_COMMIT_FINAL (drawn as an “after SATP” hand-off to the right of the flow, mirroring the Stage 0 prologue); new Chapter 6 scaffold for the end-to-end CBDC integration with its todo list; the “What ties the four messages together” illustration now reads as a chain of blocks with a block index, a monotonically increasing sequence_number under common.hash_previous_message, and drawn connectors between consecutive blocks.
  • Files: assets/js/primitives/lane-diagram.js, assets/js/chapter-02-stages.js, assets/js/chapter-03-messages.js, assets/css/satp-tutorial.css, assets/data/satp-stages.json, index.html, plans/progress.md
  • Open question: Chapter 6 needs the exact CBDC demo package paths and run commands from the Cacti repository before the prose can stop being a scaffold.