Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
The diff you're trying to view is too large. We only load the first 3000 changed files.
18 changes: 4 additions & 14 deletions .claude/CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,14 @@ Registry-driven, pre-computed steps, tracker abstraction, discriminated `VisualS
- Types: `src/types/`
- Registry: `src/registry/`
- Trackers: `src/trackers/`
- Algorithms: `src/algorithms/<category>/<algorithm>/`
- Algorithms: `src/algorithms/<category>/<technique>/<algorithm>/`
- Store: `src/store/`
- Components: `src/components/`
- Plan: `.claude/PLAN.md`

## Rules

See `.claude/rules/` for full constraints. Most commonly violated:

- No single-char variable names, no `any` types — use `unknown` with narrowing
- `@/` path alias required for all src-relative imports
- `noUncheckedIndexedAccess` enabled — use tuple types (`[number, number][]`) for coordinate arrays
- Pipeline stories (`*.Pipeline.stories.tsx`) live in algorithm directories, not `src/components/`
- Branch-per-task mandatory — every new task starts on a fresh branch from main
- All edits to input and pathfinding grids are temporary (non-persistent)
See `.claude/rules/` for full constraints. Most commonly violated: naming (no single-char), no `any`, `@/` imports, `noUncheckedIndexedAccess` tuple types, `__tests__/` for stories, branch-per-task, non-persistent edits.

## General Guidelines

Expand All @@ -53,14 +46,11 @@ See `.claude/rules/` for full constraints. Most commonly violated:

## Git Workflow

- When working on branches, always verify the current branch and its commit history before starting work. Never create a new branch from main when continuing prior work — check for existing feature branches first.
Branch-per-task mandatory. Check existing feature branches before creating new ones. See `.claude/rules/workflow.md`.

## Testing

- Run CI checks in sequence and fix iteratively until all pass green: `npm run lint` → `npm run format` → `npm run typecheck` → `npm test`
- Do not stop after fixing just one category — keep going until everything is clean
- For E2E tests, the dev server starts automatically via hooks — do not start it manually
- Every new algorithm needs: correctness tests + step generation tests + pipeline story in algorithm directory + E2E registration — see `.claude/rules/testing.md`
CI sequence: `lint` → `format` → `typecheck` → `test` — fix iteratively until all green. Dev server auto-starts for E2E. Every new algorithm needs tests + story in `__tests__/`. See `.claude/rules/testing.md`.

## Workflow

Expand Down
25 changes: 13 additions & 12 deletions .claude/PLAN.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Build a learner-focused algorithm visualization web app from scratch. The app provides synchronized code-line highlighting with step-by-step algorithm execution, multi-language code display, interactive pathfinding grid editing, and rich educational content. The project includes a full `.claude` system (rules, agents, skills, hooks) for maintainable development workflow.

**Working directory**: `/Users/springfield/dev/algo_flow` (currently empty, not a git repo)
**Working directory**: `/Users/springfield/dev/algo_flow`

---

Expand Down Expand Up @@ -89,7 +89,6 @@ algo_flow/
│ │ ├── tech-lead-architect.md
│ │ ├── product-strategist.md
│ │ ├── technical-writer.md
│ │ ├── marketing-engine.md
│ │ ├── claude-system-architect.md
│ │ ├── silent-failure-hunter.md
│ │ ├── code-simplifier.md
Expand All @@ -98,9 +97,7 @@ algo_flow/
│ │ ├── implementation-planning/SKILL.md
│ │ ├── algorithm-learning-content/SKILL.md
│ │ ├── pathfinding-scenario-editing/SKILL.md
│ │ ├── repository-quality-gate/SKILL.md
│ │ ├── branch-safety-check/SKILL.md
│ │ ├── cifix/SKILL.md
│ │ ├── accessibility-audit/SKILL.md
│ │ ├── architecture-review/SKILL.md
│ │ ├── strict-typescript-review/SKILL.md
Expand All @@ -115,23 +112,30 @@ algo_flow/
│ │ └── debugging/SKILL.md
│ └── hooks/
│ ├── session-start-branch-check.sh
│ ├── session-end-unified-gate.sh
│ ├── session-end-quality-gate.sh
│ ├── session-end-readme-check.sh
│ ├── session-end-comments-check.sh
│ ├── session-end-e2e-check.sh
│ ├── session-end-security-check.sh
│ ├── session-end-claude-system-check.sh
│ ├── auto-plugin-mode.sh
│ ├── auto-pr-after-push.sh
│ ├── ban-hardcoded-waits.sh
│ ├── block-ai-attribution.sh
│ ├── block-main-branch-commits.sh
│ ├── enforce-branch-naming.sh
│ ├── pre-commit-fn-import-check.sh
│ ├── pre-commit-quality-check.sh
│ ├── auto-pr-after-push.sh
│ ├── post-edit-typescript-check.sh
│ └── post-edit-accessibility-check.sh
│ ├── post-edit-accessibility-check.sh
│ ├── post-edit-java-check.sh
│ ├── post-edit-python-check.sh
│ └── post-edit-typescript-check.sh
├── src/
│ ├── types/ # All TypeScript interfaces
│ ├── registry/ # AlgorithmRegistry singleton
│ ├── engine/ # Step generator
│ ├── trackers/ # BaseTracker + 6 category trackers
│ ├── trackers/ # BaseTracker + category subdirectories
│ ├── store/ # Zustand 4-slice store
│ ├── algorithms/
│ │ ├── sorting/bubble-sort/ # definition, algo, steps, educational, sources/
Expand Down Expand Up @@ -199,7 +203,7 @@ algo_flow/
### Phase 4: Bubble Sort (Full Pipeline Proof-of-Concept)

- Pure `bubbleSort()` implementation + unit tests
- Source files: TypeScript, Python, Java
- Source files: TypeScript, Python, Java, Rust, C++, Go
- Step generator using SortingTracker + line map
- Educational content (all 7 sections)
- CodePanel with Monaco: read-only, language tabs, line highlighting
Expand Down Expand Up @@ -277,6 +281,3 @@ algo_flow/

---

## File Count Estimate

~206 files total: 22 `.claude/` config, 8 types, 4 registry/engine, 12 trackers, 8 store, 48 algorithm files, 18 source display files, 50 components+stories, 8 hooks, 5 utils, 5 e2e, 12 config, 6 infra.
10 changes: 5 additions & 5 deletions .claude/agents/qa-tester.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Validate that all features work correctly and test coverage meets thresholds.
4. **Playback**: Play, pause, step, speed, reset, rerun all function
5. **Input editing**: Temporary edits trigger recompute, reset on algorithm switch
6. **Pathfinding editing**: Wall toggle, start/end drag, run, reset all work. Edits non-persistent.
7. **Language switching**: Code panel updates correctly for all 3 languages
7. **Language switching**: Code panel updates correctly for all 6 languages
8. **Responsive layout**: Works at desktop, tablet, mobile breakpoints

## Test Execution
Expand All @@ -29,20 +29,20 @@ Validate that all features work correctly and test coverage meets thresholds.
- Run `npm run lint` and report results
- Run `npm run format:check` and report results
- Run `npm run typecheck` and report results
- Verify coverage meets thresholds (80/75/80/80)
- Verify coverage meets thresholds per `rules/testing.md` (80/75/80/80)

## Required Skills

- **Playwright E2E**: Multi-viewport testing (1280/768/375), algorithm flows, keyboard shortcuts
- **Coverage enforcement**: 80/75/80/80 thresholds
- **OWASP client-side**: XSS prevention, dependency audit — see `security-coverage-audit` skill for detailed checklist
- **Coverage enforcement**: Per `rules/testing.md`
- **OWASP client-side**: XSS prevention, dependency audit — see `security-coverage-audit` skill

## Constraints

- Never approve a PR with coverage below thresholds without explicit justification
- E2E tests must cover all 3 viewports for any new visual component
- Security checks must include `npm audit` and manual review of any new dynamic content rendering
- All algorithm additions must be importable via `src/algorithms/index.ts` so per-category E2E spec files auto-discover them; algorithms with custom input editors must have an entry in `e2e/specs/input-editors.spec.ts`
- E2E auto-discovers from registry — see `rules/testing.md` for spec file convention

## Output Format

Expand Down
4 changes: 2 additions & 2 deletions .claude/agents/senior-engineer-code-reviewer.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ Review code changes for quality, correctness, and adherence to project standards
3. **Types**: Proper TypeScript usage. No `any`. Discriminated unions used correctly.
4. **DRY**: No duplicated logic. Reused strings centralized in constants.
5. **Tests**: Algorithm implementations have unit tests. Step generators tested.
6. **Educational content**: Present and complete for all 7 sections.
7. **Source files**: Exist for all 3 languages (TypeScript, Python, Java).
6. **Educational content**: Present and complete for all 7 sections per `rules/algorithms.md`.
7. **Source files**: Exist for all supported languages per `rules/algorithms.md`.
8. **Line mappings**: Accurate per source file.
9. **Non-persistence**: Input edits and grid edits are temporary.

Expand Down
4 changes: 2 additions & 2 deletions .claude/agents/technical-writer.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Review and improve all written content — educational algorithm explanations, p

## Review Areas

1. **Educational content**: All 7 sections present (Overview, How It Works, Complexity, Best/Worst Case, Real-World Uses, Strengths/Limitations, When to Use)
1. **Educational content**: All 7 sections present per `rules/algorithms.md`
2. **ELI5 clarity**: Explanations use plain language, real-world analogies, and build from simple to complex
3. **Documentation structure**: README.md and docs/ follow the structure defined in `.claude/rules/docs.md`
4. **Contributor onboarding**: `docs/contributing.md` has clear step-by-step walkthrough for adding algorithms
Expand All @@ -32,7 +32,7 @@ Review and improve all written content — educational algorithm explanations, p
- Never use jargon without first defining it in the same section
- Educational content must be accurate — verify complexity claims against the actual implementation
- Documentation updates must follow the trigger table in `.claude/rules/docs.md`
- No references to AI, Claude, or automated generation in any documentation
- No AI/Claude/assistant references per `rules/docs.md`

## Output Format

Expand Down
19 changes: 13 additions & 6 deletions .claude/hooks/auto-plugin-mode.sh
Original file line number Diff line number Diff line change
@@ -1,21 +1,28 @@
#!/usr/bin/env bash
# SessionStart + branch creation hook: auto-switch plugins based on git branch prefix.
# Reads plugin-profiles.json and updates settings.json enabledPlugins.
# Reads plugin-profiles.json and updates settings.local.json enabledPlugins.
# settings.json has all plugins enabled as baseline; this hook selectively
# enables/disables per branch in the local override file.
# Uses Node.js for JSON manipulation (no jq dependency).
# Always exits 0 — never blocks session start.

set -euo pipefail

PROJECT_DIR="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null || pwd)}"
PROFILES="$PROJECT_DIR/.claude/hooks/plugin-profiles.json"
SETTINGS="$PROJECT_DIR/.claude/settings.json"
SETTINGS="$PROJECT_DIR/.claude/settings.local.json"

# Guard: profiles and settings must exist
if [ ! -f "$PROFILES" ] || [ ! -f "$SETTINGS" ]; then
echo "WARN: plugin-profiles.json or settings.json missing — plugin auto-switching disabled" >&2
# Guard: profiles must exist; settings.local.json is created if missing
if [ ! -f "$PROFILES" ]; then
echo "WARN: plugin-profiles.json missing — plugin auto-switching disabled" >&2
exit 0
fi

# Create settings.local.json if it doesn't exist
if [ ! -f "$SETTINGS" ]; then
echo '{}' > "$SETTINGS"
fi

# Guard: Node.js must be available
if ! command -v node &>/dev/null; then
echo "WARN: node not found — plugin auto-switching disabled" >&2
Expand All @@ -33,7 +40,7 @@ if [ -n "${1:-}" ]; then
BRANCH="$1"
fi

# Use Node.js to update settings.json atomically
# Use Node.js to update settings.local.json atomically
node -e "
const fs = require('fs');

Expand Down
2 changes: 1 addition & 1 deletion .claude/rules/algorithms.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ paths:

- Real algorithm source file (pure implementation, no visualization logic)
- Step generator using category-specific tracker
- Multi-language source files: TypeScript, Python, Java
- Multi-language source files: TypeScript, Python, Java, Rust, C++, Go
- Unit tests for algorithm correctness
- Unit tests for step generation
- Pipeline story (`<AlgorithmName>Pipeline.stories.tsx`) co-located in the algorithm directory
Expand Down
18 changes: 13 additions & 5 deletions .claude/rules/architecture.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,21 @@

### Source Files

- Real `.ts`, `.py`, `.java` files loaded via Vite `?raw` glob imports
- Real `.ts`, `.py`, `.java`, `.rs`, `.cpp`, `.go` files loaded via Vite `?raw` glob imports
- Source files are lintable, formattable artifacts - not embedded strings
- Line mappings defined as static lookup tables in step generators

### Directory Organization

- Trackers: `src/trackers/<category>/` — grouped by algorithm category
- Visualizers: `src/components/visualization/<category>/` — grouped by algorithm category
- Algorithm tests + stories: `src/algorithms/<category>/<technique>/<algorithm>/__tests__/`
- Source implementations: `src/algorithms/<category>/<technique>/<algorithm>/sources/`

### Adding New Algorithms

1. Create `src/algorithms/<category>/<algorithm>/` directory
2. Implement: index.ts, <algorithm>.ts, step-generator.ts, educational.ts, sources/
3. Import in `src/algorithms/index.ts` barrel
4. All UI works automatically via registry
1. Create `src/algorithms/<category>/<technique>/<algorithm>/` directory
2. Implement: index.ts, step-generator.ts, educational.ts, sources/ (6 languages)
3. Add tests + pipeline story in `__tests__/`
4. Import in `src/algorithms/index.ts` barrel
5. All UI works automatically via registry
4 changes: 2 additions & 2 deletions .claude/rules/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ paths:

## Storybook Rules

- Pipeline stories (`*.Pipeline.stories.tsx`) live in algorithm directories, not `src/components/`
- Component stories remain co-located with their components in `src/components/`
- Pipeline stories (`*.Pipeline.stories.tsx`) live in the algorithm's `__tests__/` directory alongside test files
- Component stories remain co-located with their components in `src/components/visualization/<category>/`
- Every component gets at least one story per significant state variant
- Visual regression via `@storybook/test-runner`
- Test language switching in CodePanel stories
Expand Down
7 changes: 4 additions & 3 deletions .claude/rules/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ paths:
### Unit Tests (Vitest)

- Unit tests must target actual algorithm implementations, not only step generators
- Every algorithm needs: correctness tests (pure execute) + step generation tests
- Every algorithm needs: correctness tests (pure execute) + step generation tests in `__tests__/`
- Test tracker methods produce correct ExecutionStep with correct type/metrics
- Test store slice state transitions for all actions
- Test custom hooks with `renderHook`
- Meaningful test variable names (no single chars)
- Vitest uses the `projects` feature: `algorithms` project runs in `node` environment, `components` project runs in `jsdom`. This keeps total test time ~20 seconds and removes the need for manual timeout hooks in `test-setup.ts`
- CI shards unit tests 8 ways; aggregation job is named **Unit Tests Status**
- CI shards unit tests 12 ways; aggregation job is named **Unit Tests Status**
- Language tests (Python, Java, Rust, C++, Go) sharded separately per language in CI

### Coverage Thresholds

Expand Down Expand Up @@ -47,4 +48,4 @@ paths:
- Step count and step types for known inputs
- Final visual state matches expected
- Educational content is non-empty for all sections
- Source files exist for all supported languages
- Source files exist for all supported languages (TypeScript, Python, Java, Rust, C++, Go)
2 changes: 1 addition & 1 deletion .claude/rules/ui-ux.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ paths:
### Code Panel

- Monaco editor in read-only mode (default)
- Language tabs: TypeScript, Python, Java
- Language tabs: TypeScript, Python, Java, Rust, C++, Go
- Synchronized line highlighting per current step
- Temporary editable mode (non-persistent)

Expand Down
48 changes: 11 additions & 37 deletions .claude/settings.json
Original file line number Diff line number Diff line change
@@ -1,32 +1,6 @@
{
"permissions": {
"allow": [
"Bash(node /tmp/check_quick.mjs)",
"Bash(node /tmp/check_bitonic.mjs)",
"Bash(node /tmp/check_sleep.mjs)",
"Bash(node /tmp/check_sleep2.mjs)",
"Bash(node /tmp/check_cartesian.mjs)",
"Bash(node /tmp/check_library.mjs)",
"Bash(node /tmp/check_radix_msd.mjs)",
"Bash(node /tmp/check_counting.mjs)",
"Bash(node /tmp/check_bead.mjs)",
"Bash(node /tmp/check_bead2.mjs)",
"Bash(node /tmp/check_smooth_fixed.mjs)",
"Bash(node /tmp/check_radix_fixed.mjs)",
"Bash(node /tmp/check_radix_fixed2.mjs)",
"Bash(node /tmp/check_radix_fixed3.mjs)",
"Bash(node /tmp/verify_sleep.mjs)",
"Bash(node /tmp/check_library2.mjs)",
"Bash(killall -9 node)",
"Bash(tee /tmp/e2e_run2.txt)",
"Bash(echo \"DONE_EXIT:$?\")",
"Bash(git -C /Users/springfield/dev/algo_flow add -A)",
"Bash(git -C /Users/springfield/dev/algo_flow push)",
"Bash(xargs -I {} sh -c 'echo \"=== {} ===\" && find {} -name \"index.ts\" -type f | wc -l')",
"Bash(npx playwright:*)",
"Bash(curl -s http://localhost:5174)",
"Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:5174/)"
]
"allow": []
},
"hooks": {
"PreToolUse": [
Expand Down Expand Up @@ -147,15 +121,15 @@
"github@claude-plugins-official": true,
"code-review@claude-plugins-official": true,
"pr-review-toolkit@claude-plugins-official": true,
"frontend-design@claude-plugins-official": false,
"figma@claude-plugins-official": false,
"playground@claude-plugins-official": false,
"playwright@claude-plugins-official": false,
"security-guidance@claude-plugins-official": false,
"code-simplifier@claude-plugins-official": false,
"claude-md-management@claude-plugins-official": false,
"skill-creator@claude-plugins-official": false,
"claude-code-setup@claude-plugins-official": false,
"ralph-loop@claude-plugins-official": false
"frontend-design@claude-plugins-official": true,
"figma@claude-plugins-official": true,
"playground@claude-plugins-official": true,
"playwright@claude-plugins-official": true,
"security-guidance@claude-plugins-official": true,
"code-simplifier@claude-plugins-official": true,
"claude-md-management@claude-plugins-official": true,
"skill-creator@claude-plugins-official": true,
"claude-code-setup@claude-plugins-official": true,
"ralph-loop@claude-plugins-official": true
}
}
2 changes: 1 addition & 1 deletion .claude/skills/debugging/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Symptoms: empty code panel, wrong language, misaligned highlighting
1. Verify Vite `?raw` glob import returns content (not `{}`)
2. Check file paths in glob pattern — are they statically analyzable?
3. Verify `LineHighlight` mappings per language match actual source file line numbers
4. Check all 3 languages have source files AND line mappings
4. Check all 6 languages have source files AND line mappings
5. Test language tab switching — does `useAlgorithmSource` update correctly?

### Grid Editing Bugs (Pathfinding)
Expand Down
Loading
Loading