[obrocki]

What does this change?

Adds a coherent README-only work-to-billing illustration generated from the canvas's synthetic fixtures, with seven ordered delivery steps and a separate final mocked billing checkpoint. Adds one shared experimental-use warning to every tab and refreshes the documentation previews.

Why?

Follow-up to #38, based on its merged result. Makes the static examples chronologically consistent and clarifies that experimental results are not a sole basis for billing, savings claims or individual performance decisions.

The linear ordering checks apply only to educational fixtures, not real delivery histories. The illustration uses the calculated native-user/day/model estimate from the same mocked billing response; live billing/API behavior is unchanged.

Leave this PR open for manual review. Agent merge is disabled; do not merge or close it automatically.

How was it verified?

• npm run typecheck passes — passed.
• npm run package succeeds — passed.
• Loaded in an Extension Development Host (F5) and checked the behaviour by hand

• npm test — passed: 306 tests, zero failures.
• npm run check:docs — passed: 10 Markdown files.
• npm run media:canvas — passed: all synthetic previews; delivery-step, commit, review, merge and closure ordering; the calculated billing share; SVG layout/clipping checks; the shared footer on every tab; themes, keyboard navigation and narrow layouts.

The updated canvas was loaded in the Copilot app. The VS Code F5 manual check was not run. src/chatWatcher.ts is unchanged. No real billing account or local work data was used to generate the assets.

Screenshots

Synthetic repositories, accounts and API responses only. Billing follows delivery visually but is not an eighth delivery step or an invoice for an individual PR.

[Copilot]

🔵 Needs a closer look

Final human review is explicitly requested, and browser-based visual checks were not independently rerun here.

No open issues 🎉

What changed in this PR

Adds an ordered, synthetic work-to-billing illustration to the READMEs and a shared experimental-use warning across canvas tabs. Live billing and delivery behavior remain unchanged.

Changes:

• Generates seven chronological delivery steps and a separate mocked billing checkpoint from shared fixtures.
• Adds a persistent warning against relying solely on experimental results for billing, savings claims or performance decisions.
• Updates documentation, preview generation and checks for chronology, calculated estimates, layout and warning placement.

File	Description
tools/​recipe-story.js	Builds and renders the validated synthetic illustration.
tools/​README.md	Documents illustration generation and preview checks.
tools/​make-canvas-shots.js	Fixes fixture dates and adds illustration, chronology and footer checks.
test/​recipeStory.test.js	Tests ordering, billing estimates, missing data and escaping.
test/​attributionCanvas.test.js	Checks shared warning placement and wording.
README.md	Displays the ordered work-to-billing illustration.
docs/​media/​recipe-flow.svg	Adds the generated synthetic flow graphic.
CONTRIBUTING.md	Records footer and fixture-only ordering requirements.
CHANGELOG.md	Summarizes the warning and ordered example.
.github/​extensions/​ai-attribution/​ui/​style.css	Adds theme-aware warning styling.
.github/​extensions/​ai-attribution/​ui/​index.html	Places the warning outside the changing tab panel.
.github/​extensions/​ai-attribution/​README.md	Explains the warning and embeds the illustration.

_{Review effort: Balanced}