Skip to content

feat(reference): explained examples that run in the practice terminal - #395

Merged
thierryvm merged 1 commit into
mainfrom
feat/reference-explained-examples
Sep 26, 2026
Merged

thierryvm merged 1 commit into
mainfrom
feat/reference-explained-examples

Conversation

@thierryvm

@thierryvm thierryvm commented Sep 26, 2026 •

Copy link
Copy Markdown
Owner

Summary

@Thierry asked for /app/reference to be checked like the lessons and made more pedagogical. Replayed through the engine, 224 of its 464 examples printed an error: made-up file names (cat notes.txt, cp a.txt b.txt), comments typed as part of the command (tree /F (Windows : …)), bash shown to Windows learners (2>/dev/null).

  • Explained examples. New CommandExample {command, explanation, environments?} in commandExamples.ts, merged into commandCatalogue (the 76 inline string arrays are gone: single source). Every example says what it does, uses the practice terminal's files (documents/notes.txt, projets/script.sh…) and Windows learners get the PowerShell form.
  • Honest about the simulator. NOT_SIMULATED marks commands the engine does not run yet (tree, find, less, alias, tar, zip…); the card tells the learner to try them on their own machine.
  • Permanent replay. commandReference.test.ts replays every shown example per OS (Git examples inside a prepared repository) and ratchets the 32 remaining failures (exact set: a new failure fails the test, a fixed one must be deleted). Proven with a mutation. The 32 are engine gaps (cat -n, grep -r on a directory, Get-Date, Get-Help, tasklist, Set-Content, and a real bug: git commit -am "msg" loses its message) — next PR.
  • Content fixes. umask is not a Windows command; find gets its PowerShell form; a cherry-pick example used an impossible commit id (e4f5g6h); a crontab line and .gitignore patterns were shown as commands; the curl alias note only applies to Windows PowerShell 5.1.
  • UI. Duplicated "Description" removed. Only the card header toggles, now a real Button with aria-controls: selecting an example or following a doc link no longer collapses the card, and links are no longer nested in a button. Examples wrap instead of scrolling (the end of a long command is often the option being explained). Filter pills (reported by @Thierry: 7 rows on a narrow screen) are one scrollable row until the content area is 48rem wide — a container query, because the sidebar squeezes the width, not the viewport.

Test plan

  • tsc --noEmit, eslint src, unit tests (2694 + new), vite build
  • Ratchet mutation: a broken example makes commandReference.test.ts fail; restored → green
  • ui-auditor: C1 (header as real Button), W1 (aria-controls), W3 (aria-hidden chevrons), W4 (keys) fixed; W2 (pre-existing #58a6ff literal) out of scope
  • feature-dev:code-reviewer: no finding ≥ 80, explanations checked for bash / zsh / PowerShell 7 accuracy
  • Local Chrome, Linux and Windows environments: 1280 px (pills wrap, focus ring visible), 900 px (one scrollable row, 58 px instead of 7 rows), 390 px mobile emulation (no horizontal overflow, commands wrap)
  • CI, preview smoke test

🤖 Generated with Claude Code

Résumé par Sourcery

Rendre la référence des commandes plus pédagogique et plus fiable en fournissant des exemples expliqués et exécutables, en identifiant clairement les limites du simulateur et en validant le catalogue en continu.

Nouvelles fonctionnalités :

  • Remplacer les extraits de commandes de la page de référence par des exemples expliqués et spécifiques à chaque environnement, qui utilisent les fichiers disponibles dans le terminal d’entraînement ainsi que leurs équivalents PowerShell.
  • Informer les apprenants lorsque les commandes de référence ne sont pas encore simulées par le terminal d’entraînement.

Corrections de bugs :

  • Corriger les commandes multiplateformes, les chemins, les exemples Git, les exemples de configuration et les contenus inexacts qui étaient auparavant présentés comme des commandes exécutables.
  • Empêcher les cartes de référence de se réduire lorsque les apprenants sélectionnent des exemples ou suivent des liens de documentation.

Améliorations :

  • Centraliser les exemples de commandes et les métadonnées de simulation dans une seule source de catalogue typée.
  • Améliorer l’accessibilité et le comportement responsive de la référence grâce à des boutons bascule sémantiques, des relations ARIA, des commandes avec retour à la ligne et des pastilles de filtre adaptées au conteneur.

Documentation :

  • Documenter les exemples de référence plus précis et pédagogiques ainsi que les limitations restantes du simulateur dans le journal des modifications et l’histoire du projet.

Tests :

  • Ajouter une couverture basée sur la relecture pour chaque exemple de référence affiché sous Linux, macOS et Windows, avec une liste évolutive des lacunes connues du simulateur.
Original summary in English

Summary by Sourcery

Make the command reference more pedagogical and trustworthy by providing explained, runnable examples, clearly identifying simulator limitations, and validating the catalogue continuously.

New Features:

  • Replace the reference page’s command snippets with explained, environment-specific examples that use the practice terminal’s available files and PowerShell equivalents.
  • Inform learners when reference commands are not yet simulated by the practice terminal.

Bug Fixes:

  • Correct inaccurate cross-platform commands, paths, Git examples, configuration examples, and content that was previously presented as executable commands.
  • Prevent reference cards from collapsing when learners select examples or follow documentation links.

Enhancements:

  • Centralize command examples and simulation metadata in a single typed catalogue source.
  • Improve reference accessibility and responsive behavior with semantic toggle buttons, ARIA relationships, wrapped commands, and container-aware filter pills.

Documentation:

  • Document the more accurate, pedagogical reference examples and the remaining simulator limitations in the changelog and project story.

Tests:

  • Add replay-based coverage for every displayed reference example across Linux, macOS, and Windows, with a ratcheted list of known simulator gaps.

Replayed through the engine, 224 of the 464 /app/reference examples printed
an error: made-up file names, comments typed as part of the command, bash
shown to Windows learners.

- New CommandExample {command, explanation, environments?}; examples live in
  commandExamples.ts and are merged into the catalogue (single source).
  Every example is explained for a beginner and uses the practice terminal's
  files; Windows learners get the PowerShell form.
- NOT_SIMULATED marks commands the engine does not run yet (tree, find,
  less, alias, tar, zip...); the reference tells the learner so.
- commandReference.test.ts replays every shown example (git ones inside a
  prepared repository) and ratchets the 32 remaining gaps, which are engine
  gaps fixed next.
- Content fixes: umask is not a Windows command, find gets its PowerShell
  form, a cherry-pick example used an impossible commit id, a crontab line
  and .gitignore patterns were shown as commands, the curl alias note only
  applies to Windows PowerShell 5.1.
- UI: the duplicated "Description" is gone; only the card header toggles
  (a real Button with aria-controls), so selecting an example or following a
  doc link no longer collapses the card; examples wrap instead of scrolling;
  filter pills are one scrollable row until the content area is 48rem wide
  (container query: the sidebar squeezes the width), reported by @Thierry.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@vercel

vercel Bot commented Sep 26, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
terminal-learning Ready Ready Preview Sep 26, 2026 7:20pm UTC

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @thierryvm, you've used your own review budget of 250,000 diff characters for the last 7 days.

You can request another review in 1 hour and 16 minutes by commenting @sourcery-ai review. Upgrade to get a review now.

@sourcery-ai

sourcery-ai Bot commented Sep 26, 2026

Copy link
Copy Markdown

Guide du reviewer

Refonte de /app/reference autour d’une source unique d’exemples expliqués et spécifiques à chaque système d’exploitation, validés par une relecture permanente dans le terminal sur les environnements pris en charge, tout en signalant clairement les limitations du simulateur et en améliorant l’accessibilité des cartes, le comportement des interactions et la mise en page responsive.

Diagramme du flux de rendu d’une carte de commande de référence

flowchart TD
  Start[Select command and environment] --> Filter[Filter examples by environments]
  Filter --> Status{Command simulated?}
  Status -->|No| Warning[Show simulator limitation]
  Status -->|Yes| Details[Show command details]
  Warning --> Details
  Details --> Examples[Show wrapped command and explanation]
  Header[Header button] --> Toggle[Toggle details with aria-controls]
  Toggle --> Details
Loading

Modifications au niveau des fichiers

Modification Détails Fichiers
Centraliser les exemples exécutables et pédagogiques de la page de référence ainsi que les métadonnées relatives à l’état du simulateur.
  • Introduire des exemples typés avec des commandes, des explications et des variantes spécifiques à chaque système d’exploitation.
  • Déplacer tous les tableaux d’exemples intégrés dans un catalogue unique reliant les commandes à leurs exemples.
  • Signaler les commandes non prises en charge par le simulateur et conserver une liste documentée des lacunes restantes du moteur.
  • Corriger les chemins, la syntaxe des shells, les instructions spécifiques aux plateformes ainsi que les exemples Git/contenu invalides.
src/app/data/commandExamples.ts
src/app/data/commandCatalogue.ts
src/app/types/curriculum.ts
src/test/commandReferenceGaps.ts
Ajouter une validation permanente multiplateforme qui rejoue chaque exemple affiché via le moteur de terminal.
  • Valider la couverture du catalogue, les explications, la compatibilité des environnements et les chaînes de commandes dépourvues de commentaires.
  • Rejouer les exemples pour Linux, macOS et Windows, en utilisant un dépôt Git préparé pour les commandes Git.
  • Échouer en cas de nouvelles erreurs et exiger que les lacunes connues corrigées soient supprimées de la liste de suivi.
src/test/commandReference.test.ts
src/test/commandReferenceReplay.ts
src/test/commandReferenceGaps.ts
Améliorer les interactions, l’accessibilité et la mise en page responsive des cartes de référence.
  • Remplacer le conteneur de carte cliquable par un véritable bouton d’en-tête utilisant aria-expanded et aria-controls.
  • Garder les cartes ouvertes lorsque des exemples ou des liens vers la documentation sont utilisés, et masquer les chevrons décoratifs aux technologies d’assistance.
  • Afficher des exemples filtrés et expliqués avec des invites adaptées au système d’exploitation et des commandes avec retour à la ligne.
  • Utiliser une requête de conteneur afin de conserver les filtres de catégorie sur une seule ligne défilable lorsque la zone de contenu est étroite.
src/app/components/CommandReference.tsx
Documenter la refonte de la page de référence et ses limitations restantes liées au simulateur.
  • Ajouter une entrée au changelog concernant la relecture des exemples, les corrections de contenu, le comportement de l’interface et les 32 échecs connus.
  • Ajouter une story au projet décrivant la justification pédagogique et la refonte responsive des filtres.
CHANGELOG.md
STORY.md

Conseils et commandes

Interagir avec Sourcery

  • Déclencher une nouvelle revue : commenter @sourcery-ai review sur la pull request.
  • Poursuivre les discussions : répondre directement aux commentaires de revue de Sourcery.
  • Générer une issue GitHub à partir d’un commentaire de revue : demander à Sourcery de créer une issue à partir d’un commentaire de revue en y répondant. Vous pouvez également répondre à un commentaire de revue avec @sourcery-ai issue pour créer une issue à partir de celui-ci.
  • Générer un titre de pull request : écrire @sourcery-ai n’importe où dans le titre de la pull request pour générer un titre à tout moment. Vous pouvez également commenter @sourcery-ai title sur la pull request pour générer ou régénérer le titre à tout moment.
  • Générer un résumé de pull request : écrire @sourcery-ai summary n’importe où dans le corps de la pull request pour générer un résumé de PR à tout moment, exactement à l’endroit souhaité. Vous pouvez également commenter @sourcery-ai summary sur la pull request pour générer ou régénérer le résumé à tout moment.
  • Générer le guide du reviewer : commenter @sourcery-ai guide sur la pull request pour générer ou régénérer le guide du reviewer à tout moment.
  • Résoudre tous les commentaires de Sourcery : commenter @sourcery-ai resolve sur la pull request pour résoudre tous les commentaires de Sourcery. Utile si vous avez déjà traité tous les commentaires et ne souhaitez plus les voir.
  • Ignorer toutes les revues de Sourcery : commenter @sourcery-ai dismiss sur la pull request pour ignorer toutes les revues Sourcery existantes. Particulièrement utile si vous souhaitez repartir de zéro avec une nouvelle revue — n’oubliez pas de commenter @sourcery-ai review pour déclencher une nouvelle revue !

Personnaliser votre expérience

Accédez à votre tableau de bord pour :

  • Activer ou désactiver des fonctionnalités de revue telles que le résumé de pull request généré par Sourcery, le guide du reviewer, et d’autres fonctionnalités.
  • Modifier la langue de revue.
  • Ajouter, supprimer ou modifier les instructions de revue personnalisées.
  • Ajuster d’autres paramètres de revue.

Obtenir de l’aide

Original review guide in English

Reviewer's Guide

Reworks /app/reference around a single source of explained, OS-specific examples that are validated by a permanent terminal replay across supported environments, while clearly labeling simulator gaps and improving card accessibility, interaction behavior, and responsive layout.

Flow diagram for rendering a reference command card

flowchart TD
  Start[Select command and environment] --> Filter[Filter examples by environments]
  Filter --> Status{Command simulated?}
  Status -->|No| Warning[Show simulator limitation]
  Status -->|Yes| Details[Show command details]
  Warning --> Details
  Details --> Examples[Show wrapped command and explanation]
  Header[Header button] --> Toggle[Toggle details with aria-controls]
  Toggle --> Details
Loading

File-Level Changes

Change Details Files
Centralize the reference page's runnable, pedagogical examples and simulator-status metadata.
  • Introduce typed examples with commands, explanations, and OS-specific variants.
  • Move all inline example arrays into a single command-to-examples catalogue.
  • Mark unsupported simulator commands and preserve a documented list of remaining engine gaps.
  • Correct paths, shell syntax, platform-specific guidance, and invalid Git/content examples.
src/app/data/commandExamples.ts
src/app/data/commandCatalogue.ts
src/app/types/curriculum.ts
src/test/commandReferenceGaps.ts
Add permanent cross-platform validation that replays every displayed example through the terminal engine.
  • Validate catalogue coverage, explanations, environment compatibility, and comment-free command strings.
  • Replay examples for Linux, macOS, and Windows, using a prepared Git repository for Git commands.
  • Fail on new errors and require fixed known gaps to be removed from the ratchet list.
src/test/commandReference.test.ts
src/test/commandReferenceReplay.ts
src/test/commandReferenceGaps.ts
Improve reference-card interaction, accessibility, and responsive layout.
  • Replace the clickable card container with a real header Button using aria-expanded and aria-controls.
  • Keep cards open when examples or documentation links are interacted with, and hide decorative chevrons from assistive technology.
  • Render filtered, explained examples with OS-appropriate prompts and wrapping commands.
  • Use a container query to keep category filters in one scrollable row when the content area is narrow.
src/app/components/CommandReference.tsx
Document the reference-page overhaul and its remaining simulator limitations.
  • Add changelog coverage for the example replay, content corrections, UI behavior, and 32 known failures.
  • Add a project story describing the pedagogical rationale and responsive filter redesign.
CHANGELOG.md
STORY.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@thierryvm
thierryvm merged commit 3dc0fa2 into main Sep 26, 2026
4 checks passed
@thierryvm
thierryvm deleted the feat/reference-explained-examples branch September 26, 2026 19:21

This branch was successfully deployed

1 active deployment
Preview — e244c710 Deployed Sep 26, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant