docs(codelab): match the published Google Codelab format (issue #96)

[caohy1988]

Summary

Reformats the periodic-materialization codelab (docs/codelabs/periodic_materialization.md) to follow the published Google Codelab format demonstrated in the reference example codelab (Context Caching in BigQuery, issue #96). Runnable commands and queries are preserved; the changes are presentation/reader-flow oriented.

The dual-purpose <!-- colab:* --> markers are HTML comments invisible to claat, so the rendered codelab now matches #96 and the self-contained Colab notebook still generates from the same source.

This PR also adds the BigQuery Studio graph visualization (images/graph-visualization.png) to the Query the decision trace step, using the same generated-notebook image embedding path as the existing codelab images.

Format changes (to match #96)

• Frontmatter -> ----delimited YAML: id, summary, authors, keywords: category:..., product:..., layout: paginated (drops categories/tags/status/feedback link in favor of the BigQuery Agent Analytics Roadmap #96 metadata set).
• Durations -> MM:SS per section (claat totals 42 min, and the intro estimate now matches).
• Tips/notes -> claat asides (> aside positive / > aside negative). Renders as 6 special + 1 warning callout boxes.
• Section titles sentence-cased and de-numbered (dropped Phase N:), matching BigQuery Agent Analytics Roadmap #96's descriptive step titles; all in-body cross-references updated to track the new titles.
• Bold action phrases ("Run the following command"), console output fences, and an intro workflow diagram (images/context-graph-flow.png).
• Query step visual evidence -> BigQuery Studio Graph tab screenshot (images/graph-visualization.png) with qualified GRAPH ${DATASET}.agent_decisions_graph guidance.
• Ending reshaped to ## Congratulations + #### What you've learned + #### Reference docs.

Generator change

claat aside marker lines (> aside positive / > aside negative) would otherwise leak into the Colab notebook as literal blockquote text. Taught scripts/generate_colab_from_codelab.py to strip those marker lines (same pattern it already uses for Duration: lines) so the callout body renders as a plain Markdown blockquote in Colab. Added tests/test_generate_colab_asides.py.

Verification

• generate_colab_from_codelab.py --check passes (notebook regenerated, no drift).
• Notebook: 0 leaked aside/Duration lines, 0 broken relative image refs, 0 curl (still self-contained), 3 base64-embedded PNG images.
• Graph visualization prose avoids a stale fixed node/edge-count contract and uses the dataset-qualified graph query form.
• claat export builds clean (exit 0); images copied into img/; asides render as callout boxes.
• pytest tests/test_generate_colab_asides.py tests/test_generate_colab_images.py tests/test_codelab_embedded_artifacts.py -> 12 passed.