pcottle/learnGitBranching

This system is an interactive educational platform designed to teach Git and Mercurial version control concepts through browser-based simulations. It provides a suite of structured learning levels that cover core workflows like branching, merging, rebasing, and remote operations, alongside advanced topics such as cherry-picking and history manipulation. The application features a command-line interface for executing version control commands, a visual tree-based graph to display repository state, and comprehensive internationalization support for a global audience.

15 changes.

The project underwent a significant architectural overhaul, migrating from legacy Backbone.js and canvas-based rendering to a modern Vite and React stack with ES6 classes. This transition enabled the removal of outdated dependencies and the introduction of new user-facing features, including a level builder, certificate sharing, and improved accessibility. Concurrently, the codebase was refactored to support lazy-loading, Promise-based animations, and robust testing infrastructure.

13 changes.

This period focused on expanding the application's internationalization infrastructure, introducing dynamic locale loading and comprehensive translations for new and existing levels. It also added initial support for Mercurial command translation and introduced new interactive lessons for advanced Git workflows, remote repositories, and rebase operations.

8 changes.

The project underwent a significant architectural refactoring to adopt the Flux pattern, introducing a centralized AppDispatcher and dedicated stores for managing global state, levels, and localization. This backend restructuring was accompanied by a frontend migration to React, replacing legacy views with new components for command history and helper bars. The period also saw the addition of new Git learning levels, improved internationalization tooling, and expanded test coverage to support these changes.

The generatedDocs area now includes a dedicated \levels.html\ page that displays documentation for all learning levels, along with a \github-markdown.css\ stylesheet. This stylesheet applies GitHub's official visual design (including dark/light theme support and syntax highlighting) to the rendered markdown content, ensuring the documentation pages match the look and feel of GitHub repositories.

generatedDocs · high confidence

A new logging module has been introduced at src/js/log/index.js to track user interactions with the application. This module wraps Google Analytics (gtag) events and exposes specific functions to record when users view solutions, select or solve levels, choose the next level, interact with views, or enter commands, enabling better insight into user behavior and engagement patterns.

src/js/log · high confidence

The dialogs for the sandbox tutorial, level builder, next-level completion, and solution confirmation now include translations for additional languages, specifically adding Telugu (te\_IN) and Hindi (hi\_IN) support alongside existing locales. This ensures that users interacting with these specific UI components can now see the content in their preferred language where previously it might have been missing or incomplete.

src/js/dialogs · high confidence

Added a new \src/js/mercurial/commands.js\ module that maps specific Mercurial commands (such as commit, status, export, graft, log, bookmark, and rebase) to their Git equivalents. This allows users to use Mercurial syntax within the tool, with the system translating the input into corresponding Git operations or returning localized error messages for unsupported features.

src/js/mercurial · high confidence

A new AppDispatcher module has been added to the application, integrating the Flux library to manage action dispatching. This dispatcher exposes two specific methods, handleViewAction and handleURIAction, which route incoming actions to the central Flux dispatcher with distinct payload sources (VIEW\_ACTION and URI\_ACTION) defined in AppConstants, establishing the core mechanism for unidirectional data flow in the UI.

src/js/dispatcher · high confidence

A new lesson titled 'Multiple parents' has been added to the Advanced levels, teaching users how to navigate commit history with multiple parents using the \^\ modifier (e.g., \main^2\) and chaining it with \\~\. The level includes a specific goal to create a branch at a target commit using these modifiers, with full localization support for over 20 languages including English, Spanish, French, German, Japanese, and others.

src/levels/advanced · high confidence

Added two new interactive levels in the \src/levels/workingDir\ directory that teach core Git workflow concepts. The 'The Staging Area' level explains the three Git zones (working directory, staging area, repository) and requires users to stage and commit files individually using \git add\ and \git commit\. The 'Undoing with git restore' level introduces the modern \git restore\ command, teaching users how to unstage files (\git restore --staged\) and discard uncommitted changes (\git restore \<file\>\). Both levels include comprehensive internationalization support for over 15 languages.

src/levels/workingDir · high confidence

This change introduces new JavaScript modules in the graph directory to support goal-based learning levels. The new \graph/index.js\ module provides core graph traversal and object construction logic, including recursive node creation and breadth-first search, while replacing legacy underscore methods with native JavaScript equivalents like \Object.assign\ and \Array.prototype.forEach\. The new \graph/treeCompare.js\ module implements logic to compare user git trees against goal trees, supporting various comparison modes such as branch-only, hash-agnostic, and tag-aware validation, which enables the application to verify if a user has successfully completed a specific git exercise.

src/js/graph · high confidence

The application now includes a build-time validation script (checkStrings.js) that ensures all UI string keys are defined and translated, and flags any unused keys. Additionally, a new dynamic locale loading system (index.js, localeLoader.js) allows the application to fetch and cache translation files on demand, supporting regional fallbacks (e.g., zh\_TW to zh\_CN) and improving performance by only loading necessary language data.

src/js/intl · high confidence

Users can now create custom Git demonstration levels using the new DemonstrationBuilder view, which provides text and markdown editors with live preview. Upon completing all levels, users are presented with a CertificateView that displays a live-rendered certificate, allows them to type their name, and offers options to copy the image to the clipboard, download it as a PNG, or share it via social media buttons.

src/js/views · high confidence

Added five new interactive levels in the \mixed\ directory: \describe.js\ teaches the \git describe\ command for locating commits relative to tags; \tags.js\ introduces creating and checking out tags as permanent anchors; \grabbingOneCommit.js\ demonstrates extracting a single commit from a branch using interactive rebase; and \jugglingCommits.js\ and \jugglingCommits2.js\ provide advanced exercises in reordering and amending commits using interactive rebase and cherry-pick respectively.

src/levels/mixed · high confidence

The rampup section now includes new interactive lessons for cherry-pick, interactive rebase, relative refs, detached HEAD, and reversing changes. These levels teach users how to selectively apply commits, reorder or drop commits during a rebase, navigate the commit history using caret and tilde operators, detach HEAD, and undo changes with reset and revert. Each lesson provides localized instructions and hints in multiple languages to guide users through these advanced Git workflows.

src/levels/rampup · high confidence

Two new interactive levels have been added to the rebase section. The 'Rebasing over 9000 times' level teaches users how to efficiently rebase multiple branches onto a main branch using the two-argument form of \git rebase\ to maintain a sequential commit history. The 'Branch Spaghetti' level challenges users to selectively reorder, drop, and transfer specific commits across multiple branches using \git cherry-pick\ and \git branch -f\, simulating a complex branch management scenario.

src/levels/rebase · high confidence

Added a new sequence of levels in the 'remote' module to teach working with remote repositories, including cloning, fetching, and handling diverged history. The 'Clone Intro' level introduces \git clone\ with a pre-configured remote. New levels 'Git Fetchin'', 'Fetch arguments', and 'Diverged History' cover \git fetch\, refspecs, and resolving conflicts via rebase or merge. To facilitate these lessons, the 'Faking Teamwork' level introduces the \git fakeTeamwork\ command, allowing users to simulate remote changes locally without an actual remote server. These levels are fully internationalized across 23+ languages.

src/levels/remote · high confidence

The src/js/util directory now includes several new modules that add user-facing capabilities and infrastructure. Users can now earn and share a completion certificate (src/js/util/certificate.js) and share their progress on social media platforms like Twitter, LinkedIn, and Facebook (src/js/util/sharing.js). A shared loading overlay is now available to provide visual feedback during app startup and level loads (src/js/util/appLoading.js). Additionally, the codebase has been refactored to remove the Backbone.js dependency in favor of ES6 classes and custom event handling (src/js/util/eventEmitter.js, src/js/util/eventBaton.js, src/js/util/errors.js), and includes new utilities for debouncing, throttling, and zoom detection to improve performance and responsiveness.

src/js/util · high confidence

The application has removed the legacy canvas-based graph visualization built on Arbor.js, along with the associated global state management and utility modules. Specifically, the entry point (index.html), the main application logic (mine.js), the canvas renderer and map initialization (legacy.js), and shared utilities like the scheduler and graphics constants (util.js) have been deleted. This eliminates the old particle-system-based rendering, drag-and-drop node interaction, and global variable dependencies, paving the way for the new architecture.

src · high confidence

The unminified source files in the arbor\_src directory (including dev.js, kernel.js, physics modules, and graphics utilities) have been deleted. This removes the ability to run the library directly from individual source modules for development or debugging, as the code is no longer available in this location.

_arbor\src · high confidence

This change introduces four new action modules (CommandLineActions, GlobalStateActions, LevelActions, and LocaleActions) within the src/js/actions directory. These modules serve as the view-layer interface for the new Flux architecture, dispatching specific action types (such as SUBMIT\_COMMAND, CHANGE\_IS\_ANIMATING, SET\_LEVEL\_SOLVED, and CHANGE\_LOCALE) to the central AppDispatcher. This refactoring establishes the standardized mechanism for triggering state changes across command line input, global application state, level progression, and locale settings.

src/js/actions · high confidence

The animation subsystem in src/js/visuals/animation has been rewritten to support Promise-based animations alongside the existing queue-based system. This introduces new ES6 classes (Animation, AnimationQueue, PromiseAnimation) and a new AnimationFactory module that provides methods for generating and playing animations using Promises (e.g., genCommitBirthPromiseAnimation, playHighlightPromiseAnimation). This change enables more flexible and composable animation sequences, particularly for complex operations like interactive rebases, by allowing animations to be chained and awaited asynchronously.

src/js/visuals/animation · high confidence

The application entry point now handles core bootstrapping, including setting up the event system, initializing the sandbox and command UI, and managing locale-specific rendering. It includes logic to detect and recover from stale code-split chunks after a redeploy by listening for Vite's preload error event, and ensures the document language and direction (LTR/RTL) are correctly set based on the selected locale.

src/js/app · high confidence

The command handling logic has been consolidated into a new central module (src/js/commands/index.js) that manages execution for both Git and Mercurial. This change introduces a unified command registry that maps VCS-specific commands to their configurations, enabling features such as command delegation (where one command triggers another), shortcut mapping, and option validation. Users benefit from a more robust command parser that correctly handles option flags and general arguments, while the system now provides structured maps for command descriptions, regex patterns, and supported options, improving consistency and extensibility across version control operations.

src/js/commands · high confidence

The git engine now initializes with a 'main' branch instead of 'master' and supports an opt-in simulated working directory and staging area for levels that need to model file changes. This change also introduces a headless git mode for testing and demonstration views, and refactors command handling to use a pipeline model for revision ranges.

src/js/git · high confidence

The application state management has been refactored to use a Flux architecture, introducing new stores in \src/js/stores\ to handle specific domains. \GlobalStateStore\ now tracks animation states, level-solving status, and instruction preferences. \LevelStore\ manages level progress, including a new alias system for commands, certificate tracking, and import/export functionality, all persisted to \localStorage\. \LocaleStore\ centralizes language selection, supporting browser header detection and URL parameter updates, while \CommandLineStore\ persists command history. These changes replace previous ad-hoc state handling with a unified dispatcher and action-based flow.

src/js/stores · high confidence

The introductory tutorial levels for commits, branching, merging, and rebasing have been updated with comprehensive translations for a wide range of languages, including Arabic, Persian, German, Japanese, Korean, Spanish variants, Portuguese, Galician, French, Chinese variants, Romanian, Bulgarian, Russian, Ukrainian, Vietnamese, Slovenian, Polish, Italian, Telugu, Tamil, Hindi, Turkish, Hungarian, and Azerbaijani. This ensures that users can now learn these core Git concepts in their preferred language.

src/levels/intro · high confidence

The project's build system has been replaced with Vite, introducing a new development workflow (yarn dev) and production build process (yarn build) that outputs to the ./build directory. This migration includes a new Vite configuration (vite.config.mjs) with custom plugins to handle CommonJS interop and JSX transformation, alongside ESLint replacing JSHint for code quality checks. To support this new build output, Docker support has been added via a Dockerfile and Makefile, enabling containerized builds and deployment. Additionally, development environment configuration has been standardized with a .nvmrc file for Node.js versioning and a .gitpod.yml file for pre-configured online workspace setup.

(repo-wide) · high confidence

The application introduces a new set of React components in src/js/react\_views to replace legacy views. This includes a new CommandHistoryView that manages the command log with automatic scrolling and cleanup, and a CommandView that renders individual command statuses and results. A new helper bar system (MainHelperBarView, HelperBarView, CommandsHelperBarView, IntlHelperBarView) provides a unified interface for accessing commands, switching languages, and exiting menus, while a new LevelToolbarView manages level-specific UI controls like goal visibility.

_src/js/react\views · high confidence

Users can now create and edit their own levels using the new Level Builder, which provides a dedicated interface for defining goals, start states, and dialogs. Additionally, the undo system has been fixed to prevent synchronization errors between the command log and tree history, ensuring that undo operations work correctly and do not cause commits to disappear unexpectedly.

src/js/level · high confidence

The build system now includes a suite of scripts to manage internationalization and optimize asset delivery. A new translation workflow allows contributors to extract templates, validate completeness, and import translations for new locales. To improve load times, the application now code-splits level definitions and locale strings, loading heavy content on demand rather than bundling everything upfront. Additionally, a check-package-manager script enforces the use of Yarn for dependency installation.

scripts · high confidence

The \lib\ directory has been cleaned up by removing the bundled source files for jQuery 1.8.0, Tween.js, and EventEmitter v3.1.4. This reduces the library footprint and removes dependencies on these specific legacy versions, implying that the application now relies on external or updated sources for these functionalities.

lib · high confidence

The application's data models in src/js/models have been migrated from the Backbone.js library to standalone ES6 classes. This change removes the external Backbone dependency for these components, replacing its inheritance and event-emitter patterns with native JavaScript implementations. Users will experience no functional difference, but the underlying codebase is now lighter and relies on standard ES6 features for model state management and event handling.

src/js/models · high confidence

The levels module has been refactored to separate the declarative list of level files from the runtime sequence definitions. A new \levelFiles\ export defines the order of levels within each sequence (intro, rampup, move, mixed, advanced, remote, remoteAdvanced) using relative module paths, enabling the build-time manifest generator to lazy-load levels on demand. The existing \levelSequences\ export is preserved for Node tooling, tests, and the documentation generator by requiring the individual level modules to extract their metadata. Additionally, a new \sequenceInfo.js\ file provides localized display names and descriptions for each sequence, supporting a wide range of languages including English, French, Spanish, Chinese, Japanese, and others.

src/levels · high confidence

The sandbox environment now includes several new commands to enhance usability: \alias\ and \unalias\ allow users to create and remove command shortcuts stored in local storage, \flip\ lets users invert the tree view upside down, and \disableLevelInstructions\ provides a way to hide level guidance. Additionally, the \undo\ command has been refined to only record state changes when a command actually modifies the tree, preventing unnecessary stack entries, and the \show commands\ output now includes descriptions and documentation links for better discoverability.

src/js/sandbox · high confidence

The visualization components in src/js/visuals have been refactored from Backbone.js models to standalone ES6 classes, replacing underscore utilities with native methods like Object.assign and Array.prototype.forEach. This update introduces an accessible, high-contrast color palette for branches to improve distinguishability, adds a visual staging area panel that displays working directory and staged files during specific learning levels, and implements a new flip logic that inverts the graph orientation based on screen boundaries.

src/js/visuals · high confidence

Added comprehensive test suites for the application's core stores and utilities, including CommandLineStore (command history management), GlobalStateStore (animation and UI state), LevelStore (level solving, progress import/export, and lazy loading), and LocaleStore (locale detection, persistence, and fallbacks). The changes also introduce tests for the completion certificate generation (SVG rendering and filename safety), opt-in clone semantics (remote tracking and branch handling), and the command model (argument parsing and error handling).

\\tests\\_ · high confidence_

The project now uses Vite as its build tool and development server, replacing previous tooling. The dependency list includes React 17, Flux, jQuery 3.4.0, jQuery UI 1.13.2, and Marked 18.0.13 for rendering. Development dependencies include ESLint 10, Jasmine 4, and Nyc 18 for testing and linting. The project requires Node.js version 20.19.0 or higher and uses Yarn 1.22.22 as the package manager.

(dependencies) · high confidence

The application's icon set has been upgraded to Font Awesome Free 6.6.0. This update brings a refreshed library of icons, new animation classes (such as bounce, beat, and spin), and improved rendering consistency across browsers, ensuring that all visual indicators in the interface reflect the latest design standards.

src/style · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 37 → 47 (+10.3)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 43 → 41 (-1.8)
• Architecture 78 (new)
• Maturity 55 → 65 (+9.3)
• Readiness 25 → 59 (+34.5)
• Security 61 → 64 (+3.4)
• Accessibility 42 (new)

• Boundary-crossing change coupling: base.js ↔ headless.js (tests/base.js)
• Change coupling: commands.js ↔ disabledMap.js (src/js/git/commands.js)
• Change coupling: disabledMap.js ↔ index.js (src/js/level/disabledMap.js)
• Change coupling: index.js ↔ animationFactory.js (src/js/git/index.js)
• Change coupling: index.js ↔ eventBaton.js (src/js/app/index.js)
• Change coupling: index.js ↔ tree.js (src/js/visuals/index.js)
• Change coupling: index.js ↔ visBase.js (src/js/git/index.js)
• Change coupling: restore.js ↔ staging.js (src/levels/workingDir/restore.js)
• Change coupling: visBase.js ↔ visBranch.js (src/js/visuals/visBase.js)
• Change coupling: visBase.js ↔ visNode.js (src/js/visuals/visBase.js)
• Dimension evaluation failed
• FileTooLong: intl/strings.js (src/js/intl/strings.js)
• FileTooLong: intro/branching.js (src/levels/intro/branching.js)
• FileTooLong: intro/merging.js (src/levels/intro/merging.js)
• FileTooLong: rampup/detachedHead.js (src/levels/rampup/detachedHead.js)
• FileTooLong: rampup/relativeRefs.js (src/levels/rampup/relativeRefs.js)
• FileTooLong: views/index.js (src/js/views/index.js)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• …and 33 more

• ClassTooLong: Level (src/js/level/index.js)
• Documentation: no installation or build instructions (README.md)
• End-of-life runtime: Node.js 20
• FileTooLong: visuals/index.js (src/js/visuals/index.js)
• FunctionTooLong: certificate.buildCertificateSVG (src/js/util/certificate.js)
• Further sole-owners (lower concentration)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• Hotspot: src/js/level/index.js (src/js/level/index.js)
• Hotspot: src/js/sandbox/commands.js (src/js/sandbox/commands.js)
• Low CVE: [GHSA redacted] (yarn.lock)
• Medium IaC: WD-DOCKER-0003 (Dockerfile)
• …and 181 more

• 149 commits — 110 feature/other, 39 fixes

• (repo) — 50 commits
• src/js — 40 commits
• (root) — 25 commits
• src/levels — 22 commits
• .github/workflows — 3 commits
• tests/styles.spec.js — 2 commits
• src/style — 2 commits
• .github/dependabot.yml — 1 commit
• tests/LevelStore.spec.js — 1 commit
• tests/cloneSemantics.spec.js — 1 commit
• tests/intl.spec.js — 1 commit
• src/template.index.html — 1 commit

• fix: Clarify revert commit placement
• fix: Fix Clone Intro demo to use real remote->local semantics, tighten wording, add tests
• fix: Fix blurry doubled text in the command prompt autocomplete hint
• fix: Fix font-awesome webfonts 404ing on the dev server
• fix: Fix font-awesome webfonts 404ing on the dev server
• fix: Fix missing helper bar icons
• fix: Fix missing helper bar icons
• fix: Fix next-level dialog regression and polish share buttons
• fix: Fix null this.origin crash in makeOrigin() for opt-in clonePending levels
• fix: Fix production build layout and startup crash
• fix: Fix stale autocomplete hints after prompt updates
• fix: Fix undo/gitCommandsIssued desync in Level (#1298)
• fix: Load jquery-ui draggable eagerly for ModalTerminal (fixes #1448)
• fix: Merge pull request #1403 from Chris7717/fix/validate-locale-workingdir
• fix: Merge pull request #1418 from alisadeghiaghili/fix/rtl-locales
• fix: Merge pull request #1424 from pcottle/claude/text-rendering-bug-qvnjlt
• fix: Merge pull request #1436 from Jeevanmerkaji/fix-1298-undo-bookkeeping-desync
• fix: Merge pull request #1445 from pcottle/codex/fix-certificate-name-inheritance-issue
• fix: Merge pull request #1446 from pcottle/codex/review-last-10-non-translation-prs-for-bugs
• fix: Revert "Merge branch 'perf/lazy-levels-locales' into main"
• …and 129 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

pcottle/learnGitBranching was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.