Agent Workflow Demo Build guide — Variation 14

Guide route

How the Agent Workflow Demo was built.

This variation treats the site itself as an agent pipeline. Visitors can start, stop, and reset a live demo while proof labels keep every output honest.

Brief

Build JD Workshop variation 14 as a distinct static site with a live agent pipeline demo, proof cards, and a working `/guide` route.

Do not repeat prior sites. Use process as the primary surface, state/video/no extra media assets, and labeled proof labels for all outputs.

Evidence labels

Real

Actual code, state machine, console renderer, and working Start/Stop/Reset controls.

Concept

Speculative protocol expansion or narrative feature that is explicitly labeled as concept.

Built demo

A live interactive demo surface with bounded scope, intended for direct inspection.

Technical stack

  • Static HTML/CSS/JS pilot
  • Promise-based finite-state machine for pipeline sequencing
  • Streaming console renderer with timestamped transcripts
  • Progress telemetry with reduced-motion fallback
  • Proof labels stored directly in markup; no injected runtime evidence
  • No external runtime dependencies

Implementation choices

  • The pipeline state is deterministic and inspectable. Run it again with Start/Reset to compare traces.
  • Proof panels use modal dialogs with labeled truth states to keep concept and real outputs separate.
  • The guide route is a first-class surface, not an afterthought.
  • No fake testimonials, awards, or invented evidence is presented as fact.

Critique passes

  1. Pass 1: Establish distinct identity: process-first, terminal-panel visual language, live agent trace.
  2. Pass 2: Verify proof labels, reduced-motion behavior, responsive layout, and one H1 per route.
  3. Pass 3: Run static verification across home and guide; confirm no horizontal overflow at narrow widths.