{"owner":"pcottle","repo":"learnGitBranching","hasSkills":true,"totalSkillsCount":1,"totalTokensCount":1876,"categories":["claude-rule"],"hasMcp":false,"mcpConfig":null,"found":["CLAUDE.md"],"skills":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nLearnGitBranching is an interactive git visualization tool for teaching git concepts through a game-like interface. It's a 100% client-side JavaScript application that simulates git operations and renders them visually using Raphael.js for SVG graphics.\n\n## Build & Development Commands\n\n### Setup\n```bash\nyarn install\n```\n\n### Building\n```bash\nyarn dev               # Vite development server with live reload\nyarn build             # Checked production build in ./build\nyarn generate          # Regenerate level + locale manifests (also pre-hooked)\n```\n\n### Testing & Linting\n```bash\nyarn test              # Run Jasmine test suite\nyarn test:coverage     # Run tests with nyc coverage\nyarn lint              # Run ESLint correctness checks\nyarn lint:fix          # Apply safe automatic lint fixes\nyarn lint:strings      # Validate internationalization strings\n```\n\n### Development Server\n```bash\nyarn dev               # Start Vite dev server\n# After building, serve the build directory with a static file server\n```\n\n### Single Test Execution\n```bash\n# Run a specific test file\nyarn jasmine __tests__/git.spec.js\n```\n\n## Architecture Overview\n\n### Core Components\n\n**GitEngine** (`src/js/git/index.js`)\n- The heart of the application - simulates all git operations\n- Manages the commit graph, branches, tags, refs, and HEAD\n- Processes commands and updates the visualization\n- Supports both git and Mercurial (hg) modes via `mode` property\n- Uses EventBaton pattern for command dispatching\n\n**Visualization System** (`src/js/visuals/`)\n- `visualization.js`: Main visualization controller\n- `tree.js`: Renders the commit tree using Raphael.js\n- `visNode.js`, `visBranch.js`, `visTag.js`, `visEdge.js`: Individual visual components\n- `animation/`: Animation system using promise chains (Q library)\n\n**Command Processing** (`src/js/commands/index.js`, `src/js/git/commands.js`)\n- Commands are defined with regex patterns, options, and execute functions\n- Supports both git and Mercurial command sets\n- Command delegation system allows commands to internally invoke other commands\n- All git commands are simulated - they manipulate in-memory data structures\n\n**Levels System** (`src/levels/`)\n- Each level is a JavaScript module exporting level configuration\n- Organized into sequences: intro, rampup, move, mixed, advanced, remote, remoteAdvanced\n- Level definition includes: name, goal description, starting tree state, solution validation\n- See `src/levels/index.js` for all level sequences\n\n### Flux Architecture\n\nThe app uses a Flux-like architecture:\n\n**Dispatcher** (`src/js/dispatcher/AppDispatcher.js`)\n- Central event bus using Facebook's Flux Dispatcher\n- Handles VIEW_ACTION and URI_ACTION payload sources\n\n**Stores** (`src/js/stores/`)\n- `CommandLineStore.js`: Manages command line state\n- `LevelStore.js`: Tracks current level and progress\n- `LocaleStore.js`: Handles internationalization\n- `GlobalStateStore.js`: Global application state\n\n**Actions** (`src/js/actions/`)\n- Action creators for CommandLine, Level, Locale, and GlobalState\n\n### UI Components\n\n**Backbone Views** (`src/js/views/`)\n- Legacy Backbone.js views for modals, dialogs, builders\n- `gitDemonstrationView.js`: Shows animated git command demonstrations\n\n**React Components** (`src/js/react_views/`)\n- Modern React components for command line, toolbar, helper bars\n- Command history view with syntax highlighting\n\n### Key Patterns\n\n**EventBaton** (`src/js/util/eventBaton.js`)\n- Pattern for transferring event handling responsibility\n- Used extensively for command processing and level events\n\n**TreeCompare** (`src/js/graph/treeCompare.js`)\n- Compares two commit trees for level completion validation\n- Handles branch positions, commit structure, tags\n\n**Animation Chains**\n- All visual updates go through animation queue\n- Uses Q promises to chain animations\n- Can be disabled for testing (headless mode)\n\n## Project Structure\n\n```\nsrc/\n├── js/\n│   ├── app/           # Application bootstrapping\n│   ├── git/           # Git engine and commands\n│   ├── mercurial/     # Mercurial (hg) support\n│   ├── commands/      # Command parsing and execution\n│   ├── level/         # Level loading and validation\n│   ├── visuals/       # Visualization and animation\n│   ├── views/         # Backbone views\n│   ├── react_views/   # React components\n│   ├── stores/        # Flux stores\n│   ├── actions/       # Flux actions\n│   ├── models/        # Backbone models and collections\n│   ├── intl/          # Internationalization\n│   ├── graph/         # Tree comparison logic\n│   └── util/          # Utilities\n├── levels/            # Level definitions organized by category\n└── style/             # CSS files\n\n__tests__/             # Jasmine test specs\nindex.html             # Vite entry point and HTML view templates\n```\n\n## Build Process\n\nThe Vite build process:\n1. `scripts/generate.js` writes `src/levels/generated/manifest.js` and\n   `src/js/intl/generated/<locale>.js` (hooked via `predev`/`prebuild`/`pretest`)\n2. Tests run with Jasmine\n3. Vite bundles CommonJS JavaScript and transforms JSX; the generated `load()` thunks\n   code-split each level and each locale into its own chunk, and third-party code\n   is kept in a stable `vendor` chunk for cacheability\n4. CSS and JavaScript are minified and hashed for cache busting\n5. Static assets and generated documentation are copied into `build/`\n\n### Lazy levels and locales\n\nLevel definitions (dialog copy, trees, solutions) and locale string tables are\nthe two largest parts of the app and carry every locale, so neither is imported\nat startup:\n\n- `src/levels/index.js` exposes the declarative `levelFiles` map (source of\n  truth). The generated manifest holds only `id`/`name` for the level map, and\n  `LevelStore.loadLevel(id)` dynamically imports the full definition when a\n  level is opened. `startLevel` and the builder's edit path await it; everything\n  else uses the synchronous stub.\n- `src/js/intl/strings.js` stays the translation source of truth. `intl`\n  synchronously loads `en_US` as a fallback and lazily imports the active\n  locale via `intl.loadLocale()`. The app resolves the locale and awaits that\n  load before the first render (see `app/index.js` `detectLocale`), so users\n  never see a frame of English first. Resolution order is\n  `?locale=` URL param → stored preference (`localStorage.locale`, with a\n  180-day TTL) → browser header; picks are persisted on change. Later runtime\n  switches emit a change event and re-render. `LocaleStore` itself stays\n  synchronous. A shared loading overlay (`#appLoading` in `index.html`, driven\n  by `src/js/util/appLoading.js`) covers slow startup and on-demand level\n  loads; it fades in only after 250 ms so fast loads never flash it, and\n  `bootstrap()` clears it (with a 15 s safety timeout). Levels are also\n  prefetched on intent (next level after solving, or hovering the level map)\n  via `LevelStore.prefetchLevel()`.\n\n## Key Technologies\n\n- **Backbone.js**: MVC framework (legacy parts)\n- **React 17**: UI components (modern parts)\n- **Flux**: Unidirectional data flow\n- **Raphael.js**: SVG graphics for visualization\n- **Q**: Promises for animation chains\n- **jQuery/jQuery UI**: DOM manipulation and dialogs\n- **Vite**: Module bundling, development server, and JSX transform\n- **ESLint**: Static correctness checks\n- **Jasmine**: Testing framework\n\n## Testing Conventions\n\n- Tests in `__tests__/` directory\n- Headless git engine for testing (`src/js/git/headless.js`)\n- Use `create.js` helper to set up test git trees\n- Mock commands with `mock.js` utility\n- Tests cover git operations, remote operations, levels, tree comparison\n\n## Remote Repository Simulation\n\nRemote operations (push/pull/fetch) are simulated by creating a separate GitEngine instance for the \"origin\" repository. The `o/` prefix denotes remote tracking branches.\n\n## Internationalization\n\nString translations in `src/js/intl/strings.js`. Use `intl.str()` and `intl.getDialog()` to access localized strings. Locale validation via `checkStrings.js`.\n"},"files":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nLearnGitBranching is an interactive git visualization tool for teaching git concepts through a game-like interface. It's a 100% client-side JavaScript application that simulates git operations and renders them visually using Raphael.js for SVG graphics.\n\n## Build & Development Commands\n\n### Setup\n```bash\nyarn install\n```\n\n### Building\n```bash\nyarn dev               # Vite development server with live reload\nyarn build             # Checked production build in ./build\nyarn generate          # Regenerate level + locale manifests (also pre-hooked)\n```\n\n### Testing & Linting\n```bash\nyarn test              # Run Jasmine test suite\nyarn test:coverage     # Run tests with nyc coverage\nyarn lint              # Run ESLint correctness checks\nyarn lint:fix          # Apply safe automatic lint fixes\nyarn lint:strings      # Validate internationalization strings\n```\n\n### Development Server\n```bash\nyarn dev               # Start Vite dev server\n# After building, serve the build directory with a static file server\n```\n\n### Single Test Execution\n```bash\n# Run a specific test file\nyarn jasmine __tests__/git.spec.js\n```\n\n## Architecture Overview\n\n### Core Components\n\n**GitEngine** (`src/js/git/index.js`)\n- The heart of the application - simulates all git operations\n- Manages the commit graph, branches, tags, refs, and HEAD\n- Processes commands and updates the visualization\n- Supports both git and Mercurial (hg) modes via `mode` property\n- Uses EventBaton pattern for command dispatching\n\n**Visualization System** (`src/js/visuals/`)\n- `visualization.js`: Main visualization controller\n- `tree.js`: Renders the commit tree using Raphael.js\n- `visNode.js`, `visBranch.js`, `visTag.js`, `visEdge.js`: Individual visual components\n- `animation/`: Animation system using promise chains (Q library)\n\n**Command Processing** (`src/js/commands/index.js`, `src/js/git/commands.js`)\n- Commands are defined with regex patterns, options, and execute functions\n- Supports both git and Mercurial command sets\n- Command delegation system allows commands to internally invoke other commands\n- All git commands are simulated - they manipulate in-memory data structures\n\n**Levels System** (`src/levels/`)\n- Each level is a JavaScript module exporting level configuration\n- Organized into sequences: intro, rampup, move, mixed, advanced, remote, remoteAdvanced\n- Level definition includes: name, goal description, starting tree state, solution validation\n- See `src/levels/index.js` for all level sequences\n\n### Flux Architecture\n\nThe app uses a Flux-like architecture:\n\n**Dispatcher** (`src/js/dispatcher/AppDispatcher.js`)\n- Central event bus using Facebook's Flux Dispatcher\n- Handles VIEW_ACTION and URI_ACTION payload sources\n\n**Stores** (`src/js/stores/`)\n- `CommandLineStore.js`: Manages command line state\n- `LevelStore.js`: Tracks current level and progress\n- `LocaleStore.js`: Handles internationalization\n- `GlobalStateStore.js`: Global application state\n\n**Actions** (`src/js/actions/`)\n- Action creators for CommandLine, Level, Locale, and GlobalState\n\n### UI Components\n\n**Backbone Views** (`src/js/views/`)\n- Legacy Backbone.js views for modals, dialogs, builders\n- `gitDemonstrationView.js`: Shows animated git command demonstrations\n\n**React Components** (`src/js/react_views/`)\n- Modern React components for command line, toolbar, helper bars\n- Command history view with syntax highlighting\n\n### Key Patterns\n\n**EventBaton** (`src/js/util/eventBaton.js`)\n- Pattern for transferring event handling responsibility\n- Used extensively for command processing and level events\n\n**TreeCompare** (`src/js/graph/treeCompare.js`)\n- Compares two commit trees for level completion validation\n- Handles branch positions, commit structure, tags\n\n**Animation Chains**\n- All visual updates go through animation queue\n- Uses Q promises to chain animations\n- Can be disabled for testing (headless mode)\n\n## Project Structure\n\n```\nsrc/\n├── js/\n│   ├── app/           # Application bootstrapping\n│   ├── git/           # Git engine and commands\n│   ├── mercurial/     # Mercurial (hg) support\n│   ├── commands/      # Command parsing and execution\n│   ├── level/         # Level loading and validation\n│   ├── visuals/       # Visualization and animation\n│   ├── views/         # Backbone views\n│   ├── react_views/   # React components\n│   ├── stores/        # Flux stores\n│   ├── actions/       # Flux actions\n│   ├── models/        # Backbone models and collections\n│   ├── intl/          # Internationalization\n│   ├── graph/         # Tree comparison logic\n│   └── util/          # Utilities\n├── levels/            # Level definitions organized by category\n└── style/             # CSS files\n\n__tests__/             # Jasmine test specs\nindex.html             # Vite entry point and HTML view templates\n```\n\n## Build Process\n\nThe Vite build process:\n1. `scripts/generate.js` writes `src/levels/generated/manifest.js` and\n   `src/js/intl/generated/<locale>.js` (hooked via `predev`/`prebuild`/`pretest`)\n2. Tests run with Jasmine\n3. Vite bundles CommonJS JavaScript and transforms JSX; the generated `load()` thunks\n   code-split each level and each locale into its own chunk, and third-party code\n   is kept in a stable `vendor` chunk for cacheability\n4. CSS and JavaScript are minified and hashed for cache busting\n5. Static assets and generated documentation are copied into `build/`\n\n### Lazy levels and locales\n\nLevel definitions (dialog copy, trees, solutions) and locale string tables are\nthe two largest parts of the app and carry every locale, so neither is imported\nat startup:\n\n- `src/levels/index.js` exposes the declarative `levelFiles` map (source of\n  truth). The generated manifest holds only `id`/`name` for the level map, and\n  `LevelStore.loadLevel(id)` dynamically imports the full definition when a\n  level is opened. `startLevel` and the builder's edit path await it; everything\n  else uses the synchronous stub.\n- `src/js/intl/strings.js` stays the translation source of truth. `intl`\n  synchronously loads `en_US` as a fallback and lazily imports the active\n  locale via `intl.loadLocale()`. The app resolves the locale and awaits that\n  load before the first render (see `app/index.js` `detectLocale`), so users\n  never see a frame of English first. Resolution order is\n  `?locale=` URL param → stored preference (`localStorage.locale`, with a\n  180-day TTL) → browser header; picks are persisted on change. Later runtime\n  switches emit a change event and re-render. `LocaleStore` itself stays\n  synchronous. A shared loading overlay (`#appLoading` in `index.html`, driven\n  by `src/js/util/appLoading.js`) covers slow startup and on-demand level\n  loads; it fades in only after 250 ms so fast loads never flash it, and\n  `bootstrap()` clears it (with a 15 s safety timeout). Levels are also\n  prefetched on intent (next level after solving, or hovering the level map)\n  via `LevelStore.prefetchLevel()`.\n\n## Key Technologies\n\n- **Backbone.js**: MVC framework (legacy parts)\n- **React 17**: UI components (modern parts)\n- **Flux**: Unidirectional data flow\n- **Raphael.js**: SVG graphics for visualization\n- **Q**: Promises for animation chains\n- **jQuery/jQuery UI**: DOM manipulation and dialogs\n- **Vite**: Module bundling, development server, and JSX transform\n- **ESLint**: Static correctness checks\n- **Jasmine**: Testing framework\n\n## Testing Conventions\n\n- Tests in `__tests__/` directory\n- Headless git engine for testing (`src/js/git/headless.js`)\n- Use `create.js` helper to set up test git trees\n- Mock commands with `mock.js` utility\n- Tests cover git operations, remote operations, levels, tree comparison\n\n## Remote Repository Simulation\n\nRemote operations (push/pull/fetch) are simulated by creating a separate GitEngine instance for the \"origin\" repository. The `o/` prefix denotes remote tracking branches.\n\n## Internationalization\n\nString translations in `src/js/intl/strings.js`. Use `intl.str()` and `intl.getDialog()` to access localized strings. Locale validation via `checkStrings.js`.\n"},"items":[{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/pcottle/learnGitBranching/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nLearnGitBranching is an interactive git visualization tool for teaching git concepts through a game-like interface. It's a 100% client-side JavaScript application that simulates git operations and renders them visually using Raphael.js for SVG graphics.\n\n## Build & Development Commands\n\n### Setup\n```bash\nyarn install\n```\n\n### Building\n```bash\nyarn dev               # Vite development server with live reload\nyarn build             # Checked production build in ./build\nyarn generate          # Regenerate level + locale manifests (also pre-hooked)\n```\n\n### Testing & Linting\n```bash\nyarn test              # Run Jasmine test suite\nyarn test:coverage     # Run tests with nyc coverage\nyarn lint              # Run ESLint correctness checks\nyarn lint:fix          # Apply safe automatic lint fixes\nyarn lint:strings      # Validate internationalization strings\n```\n\n### Development Server\n```bash\nyarn dev               # Start Vite dev server\n# After building, serve the build directory with a static file server\n```\n\n### Single Test Execution\n```bash\n# Run a specific test file\nyarn jasmine __tests__/git.spec.js\n```\n\n## Architecture Overview\n\n### Core Components\n\n**GitEngine** (`src/js/git/index.js`)\n- The heart of the application - simulates all git operations\n- Manages the commit graph, branches, tags, refs, and HEAD\n- Processes commands and updates the visualization\n- Supports both git and Mercurial (hg) modes via `mode` property\n- Uses EventBaton pattern for command dispatching\n\n**Visualization System** (`src/js/visuals/`)\n- `visualization.js`: Main visualization controller\n- `tree.js`: Renders the commit tree using Raphael.js\n- `visNode.js`, `visBranch.js`, `visTag.js`, `visEdge.js`: Individual visual components\n- `animation/`: Animation system using promise chains (Q library)\n\n**Command Processing** (`src/js/commands/index.js`, `src/js/git/commands.js`)\n- Commands are defined with regex patterns, options, and execute functions\n- Supports both git and Mercurial command sets\n- Command delegation system allows commands to internally invoke other commands\n- All git commands are simulated - they manipulate in-memory data structures\n\n**Levels System** (`src/levels/`)\n- Each level is a JavaScript module exporting level configuration\n- Organized into sequences: intro, rampup, move, mixed, advanced, remote, remoteAdvanced\n- Level definition includes: name, goal description, starting tree state, solution validation\n- See `src/levels/index.js` for all level sequences\n\n### Flux Architecture\n\nThe app uses a Flux-like architecture:\n\n**Dispatcher** (`src/js/dispatcher/AppDispatcher.js`)\n- Central event bus using Facebook's Flux Dispatcher\n- Handles VIEW_ACTION and URI_ACTION payload sources\n\n**Stores** (`src/js/stores/`)\n- `CommandLineStore.js`: Manages command line state\n- `LevelStore.js`: Tracks current level and progress\n- `LocaleStore.js`: Handles internationalization\n- `GlobalStateStore.js`: Global application state\n\n**Actions** (`src/js/actions/`)\n- Action creators for CommandLine, Level, Locale, and GlobalState\n\n### UI Components\n\n**Backbone Views** (`src/js/views/`)\n- Legacy Backbone.js views for modals, dialogs, builders\n- `gitDemonstrationView.js`: Shows animated git command demonstrations\n\n**React Components** (`src/js/react_views/`)\n- Modern React components for command line, toolbar, helper bars\n- Command history view with syntax highlighting\n\n### Key Patterns\n\n**EventBaton** (`src/js/util/eventBaton.js`)\n- Pattern for transferring event handling responsibility\n- Used extensively for command processing and level events\n\n**TreeCompare** (`src/js/graph/treeCompare.js`)\n- Compares two commit trees for level completion validation\n- Handles branch positions, commit structure, tags\n\n**Animation Chains**\n- All visual updates go through animation queue\n- Uses Q promises to chain animations\n- Can be disabled for testing (headless mode)\n\n## Project Structure\n\n```\nsrc/\n├── js/\n│   ├── app/           # Application bootstrapping\n│   ├── git/           # Git engine and commands\n│   ├── mercurial/     # Mercurial (hg) support\n│   ├── commands/      # Command parsing and execution\n│   ├── level/         # Level loading and validation\n│   ├── visuals/       # Visualization and animation\n│   ├── views/         # Backbone views\n│   ├── react_views/   # React components\n│   ├── stores/        # Flux stores\n│   ├── actions/       # Flux actions\n│   ├── models/        # Backbone models and collections\n│   ├── intl/          # Internationalization\n│   ├── graph/         # Tree comparison logic\n│   └── util/          # Utilities\n├── levels/            # Level definitions organized by category\n└── style/             # CSS files\n\n__tests__/             # Jasmine test specs\nindex.html             # Vite entry point and HTML view templates\n```\n\n## Build Process\n\nThe Vite build process:\n1. `scripts/generate.js` writes `src/levels/generated/manifest.js` and\n   `src/js/intl/generated/<locale>.js` (hooked via `predev`/`prebuild`/`pretest`)\n2. Tests run with Jasmine\n3. Vite bundles CommonJS JavaScript and transforms JSX; the generated `load()` thunks\n   code-split each level and each locale into its own chunk, and third-party code\n   is kept in a stable `vendor` chunk for cacheability\n4. CSS and JavaScript are minified and hashed for cache busting\n5. Static assets and generated documentation are copied into `build/`\n\n### Lazy levels and locales\n\nLevel definitions (dialog copy, trees, solutions) and locale string tables are\nthe two largest parts of the app and carry every locale, so neither is imported\nat startup:\n\n- `src/levels/index.js` exposes the declarative `levelFiles` map (source of\n  truth). The generated manifest holds only `id`/`name` for the level map, and\n  `LevelStore.loadLevel(id)` dynamically imports the full definition when a\n  level is opened. `startLevel` and the builder's edit path await it; everything\n  else uses the synchronous stub.\n- `src/js/intl/strings.js` stays the translation source of truth. `intl`\n  synchronously loads `en_US` as a fallback and lazily imports the active\n  locale via `intl.loadLocale()`. The app resolves the locale and awaits that\n  load before the first render (see `app/index.js` `detectLocale`), so users\n  never see a frame of English first. Resolution order is\n  `?locale=` URL param → stored preference (`localStorage.locale`, with a\n  180-day TTL) → browser header; picks are persisted on change. Later runtime\n  switches emit a change event and re-render. `LocaleStore` itself stays\n  synchronous. A shared loading overlay (`#appLoading` in `index.html`, driven\n  by `src/js/util/appLoading.js`) covers slow startup and on-demand level\n  loads; it fades in only after 250 ms so fast loads never flash it, and\n  `bootstrap()` clears it (with a 15 s safety timeout). Levels are also\n  prefetched on intent (next level after solving, or hovering the level map)\n  via `LevelStore.prefetchLevel()`.\n\n## Key Technologies\n\n- **Backbone.js**: MVC framework (legacy parts)\n- **React 17**: UI components (modern parts)\n- **Flux**: Unidirectional data flow\n- **Raphael.js**: SVG graphics for visualization\n- **Q**: Promises for animation chains\n- **jQuery/jQuery UI**: DOM manipulation and dialogs\n- **Vite**: Module bundling, development server, and JSX transform\n- **ESLint**: Static correctness checks\n- **Jasmine**: Testing framework\n\n## Testing Conventions\n\n- Tests in `__tests__/` directory\n- Headless git engine for testing (`src/js/git/headless.js`)\n- Use `create.js` helper to set up test git trees\n- Mock commands with `mock.js` utility\n- Tests cover git operations, remote operations, levels, tree comparison\n\n## Remote Repository Simulation\n\nRemote operations (push/pull/fetch) are simulated by creating a separate GitEngine instance for the \"origin\" repository. The `o/` prefix denotes remote tracking branches.\n\n## Internationalization\n\nString translations in `src/js/intl/strings.js`. Use `intl.str()` and `intl.getDialog()` to access localized strings. Locale validation via `checkStrings.js`.\n","isInternal":false,"tokens":1876,"sizeBytes":8296}],"systemPromptSnippet":"<yakaai_skills repo=\"pcottle/learnGitBranching\">\n<!-- File: CLAUDE.md (Tokens: ~1876 | Category: claude-rule) -->\n# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nLearnGitBranching is an interactive git visualization tool for teaching git concepts through a game-like interface. It's a 100% client-side JavaScript application that simulates git operations and renders them visually using Raphael.js for SVG graphics.\n\n## Build & Development Commands\n\n### Setup\n```bash\nyarn install\n```\n\n### Building\n```bash\nyarn dev               # Vite development server with live reload\nyarn build             # Checked production build in ./build\nyarn generate          # Regenerate level + locale manifests (also pre-hooked)\n```\n\n### Testing & Linting\n```bash\nyarn test              # Run Jasmine test suite\nyarn test:coverage     # Run tests with nyc coverage\nyarn lint              # Run ESLint correctness checks\nyarn lint:fix          # Apply safe automatic lint fixes\nyarn lint:strings      # Validate internationalization strings\n```\n\n### Development Server\n```bash\nyarn dev               # Start Vite dev server\n# After building, serve the build directory with a static file server\n```\n\n### Single Test Execution\n```bash\n# Run a specific test file\nyarn jasmine __tests__/git.spec.js\n```\n\n## Architecture Overview\n\n### Core Components\n\n**GitEngine** (`src/js/git/index.js`)\n- The heart of the application - simulates all git operations\n- Manages the commit graph, branches, tags, refs, and HEAD\n- Processes commands and updates the visualization\n- Supports both git and Mercurial (hg) modes via `mode` property\n- Uses EventBaton pattern for command dispatching\n\n**Visualization System** (`src/js/visuals/`)\n- `visualization.js`: Main visualization controller\n- `tree.js`: Renders the commit tree using Raphael.js\n- `visNode.js`, `visBranch.js`, `visTag.js`, `visEdge.js`: Individual visual components\n- `animation/`: Animation system using promise chains (Q library)\n\n**Command Processing** (`src/js/commands/index.js`, `src/js/git/commands.js`)\n- Commands are defined with regex patterns, options, and execute functions\n- Supports both git and Mercurial command sets\n- Command delegation system allows commands to internally invoke other commands\n- All git commands are simulated - they manipulate in-memory data structures\n\n**Levels System** (`src/levels/`)\n- Each level is a JavaScript module exporting level configuration\n- Organized into sequences: intro, rampup, move, mixed, advanced, remote, remoteAdvanced\n- Level definition includes: name, goal description, starting tree state, solution validation\n- See `src/levels/index.js` for all level sequences\n\n### Flux Architecture\n\nThe app uses a Flux-like architecture:\n\n**Dispatcher** (`src/js/dispatcher/AppDispatcher.js`)\n- Central event bus using Facebook's Flux Dispatcher\n- Handles VIEW_ACTION and URI_ACTION payload sources\n\n**Stores** (`src/js/stores/`)\n- `CommandLineStore.js`: Manages command line state\n- `LevelStore.js`: Tracks current level and progress\n- `LocaleStore.js`: Handles internationalization\n- `GlobalStateStore.js`: Global application state\n\n**Actions** (`src/js/actions/`)\n- Action creators for CommandLine, Level, Locale, and GlobalState\n\n### UI Components\n\n**Backbone Views** (`src/js/views/`)\n- Legacy Backbone.js views for modals, dialogs, builders\n- `gitDemonstrationView.js`: Shows animated git command demonstrations\n\n**React Components** (`src/js/react_views/`)\n- Modern React components for command line, toolbar, helper bars\n- Command history view with syntax highlighting\n\n### Key Patterns\n\n**EventBaton** (`src/js/util/eventBaton.js`)\n- Pattern for transferring event handling responsibility\n- Used extensively for command processing and level events\n\n**TreeCompare** (`src/js/graph/treeCompare.js`)\n- Compares two commit trees for level completion validation\n- Handles branch positions, commit structure, tags\n\n**Animation Chains**\n- All visual updates go through animation queue\n- Uses Q promises to chain animations\n- Can be disabled for testing (headless mode)\n\n## Project Structure\n\n```\nsrc/\n├── js/\n│   ├── app/           # Application bootstrapping\n│   ├── git/           # Git engine and commands\n│   ├── mercurial/     # Mercurial (hg) support\n│   ├── commands/      # Command parsing and execution\n│   ├── level/         # Level loading and validation\n│   ├── visuals/       # Visualization and animation\n│   ├── views/         # Backbone views\n│   ├── react_views/   # React components\n│   ├── stores/        # Flux stores\n│   ├── actions/       # Flux actions\n│   ├── models/        # Backbone models and collections\n│   ├── intl/          # Internationalization\n│   ├── graph/         # Tree comparison logic\n│   └── util/          # Utilities\n├── levels/            # Level definitions organized by category\n└── style/             # CSS files\n\n__tests__/             # Jasmine test specs\nindex.html             # Vite entry point and HTML view templates\n```\n\n## Build Process\n\nThe Vite build process:\n1. `scripts/generate.js` writes `src/levels/generated/manifest.js` and\n   `src/js/intl/generated/<locale>.js` (hooked via `predev`/`prebuild`/`pretest`)\n2. Tests run with Jasmine\n3. Vite bundles CommonJS JavaScript and transforms JSX; the generated `load()` thunks\n   code-split each level and each locale into its own chunk, and third-party code\n   is kept in a stable `vendor` chunk for cacheability\n4. CSS and JavaScript are minified and hashed for cache busting\n5. Static assets and generated documentation are copied into `build/`\n\n### Lazy levels and locales\n\nLevel definitions (dialog copy, trees, solutions) and locale string tables are\nthe two largest parts of the app and carry every locale, so neither is imported\nat startup:\n\n- `src/levels/index.js` exposes the declarative `levelFiles` map (source of\n  truth). The generated manifest holds only `id`/`name` for the level map, and\n  `LevelStore.loadLevel(id)` dynamically imports the full definition when a\n  level is opened. `startLevel` and the builder's edit path await it; everything\n  else uses the synchronous stub.\n- `src/js/intl/strings.js` stays the translation source of truth. `intl`\n  synchronously loads `en_US` as a fallback and lazily imports the active\n  locale via `intl.loadLocale()`. The app resolves the locale and awaits that\n  load before the first render (see `app/index.js` `detectLocale`), so users\n  never see a frame of English first. Resolution order is\n  `?locale=` URL param → stored preference (`localStorage.locale`, with a\n  180-day TTL) → browser header; picks are persisted on change. Later runtime\n  switches emit a change event and re-render. `LocaleStore` itself stays\n  synchronous. A shared loading overlay (`#appLoading` in `index.html`, driven\n  by `src/js/util/appLoading.js`) covers slow startup and on-demand level\n  loads; it fades in only after 250 ms so fast loads never flash it, and\n  `bootstrap()` clears it (with a 15 s safety timeout). Levels are also\n  prefetched on intent (next level after solving, or hovering the level map)\n  via `LevelStore.prefetchLevel()`.\n\n## Key Technologies\n\n- **Backbone.js**: MVC framework (legacy parts)\n- **React 17**: UI components (modern parts)\n- **Flux**: Unidirectional data flow\n- **Raphael.js**: SVG graphics for visualization\n- **Q**: Promises for animation chains\n- **jQuery/jQuery UI**: DOM manipulation and dialogs\n- **Vite**: Module bundling, development server, and JSX transform\n- **ESLint**: Static correctness checks\n- **Jasmine**: Testing framework\n\n## Testing Conventions\n\n- Tests in `__tests__/` directory\n- Headless git engine for testing (`src/js/git/headless.js`)\n- Use `create.js` helper to set up test git trees\n- Mock commands with `mock.js` utility\n- Tests cover git operations, remote operations, levels, tree comparison\n\n## Remote Repository Simulation\n\nRemote operations (push/pull/fetch) are simulated by creating a separate GitEngine instance for the \"origin\" repository. The `o/` prefix denotes remote tracking branches.\n\n## Internationalization\n\nString translations in `src/js/intl/strings.js`. Use `intl.str()` and `intl.getDialog()` to access localized strings. Locale validation via `checkStrings.js`.\n</yakaai_skills>"}