CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Common Commands

# Development
npm run dev              # Start dev server on port 5173
npm run build            # TypeScript check + Vite build
npm run types            # TypeScript type check only
npm run lint             # ESLint
npm run preview          # Preview production build

# Testing
npm run test             # Vitest watch mode
npm run test:ui          # Vitest UI mode
npm run test:run         # Run tests once (watch=false)
npm run test:e2e:install # Install Playwright browsers
npm run test:e2e         # Run E2E tests
npm run test:e2e:ui      # Playwright UI mode

Code Style

File naming:
```
PascalCase.tsx
```
for components,
```
camelCase.ts
```
for utilities
Exports: Prefer named exports; default only for React components
Conventional Commits:
```
feat:
```
,
```
fix:
```
,
```
refactor:
```
,
```
test:
```
,
```
docs:
```
,
```
chore:
```

TypeScript: Strict mode enabled (

noUncheckedIndexedAccess

noUnusedLocals

noUnusedParameters

)

Test Conventions

Arrange-Act-Assert structure
Reset store state in
```
beforeEach
```
each test
Store tests:
```
useGraphStore.getState().clearGraph()
```
before each test
Mock external deps (localStorage, fetch)

Architecture

LangGraph Visual Modeler - A deterministic, explainable visual modeling environment for LangGraph applications. No backend execution required.

Tech Stack

Frontend: React 18 + TypeScript + Vite
Canvas: React Flow (node-edge graph modeling)
State: Zustand (graph, simulation, UI stores)
Storage: localStorage with auto-save

Core Concepts

7 Node Types:

Start

LLM

Tool

Router

Reducer

LoopGuard

End

Simulation Engine: Deterministic step-by-step execution with cycle detection, edge firing explanations, and immutable state snapshots. Mock execution for MVP (no real LLM calls).

Data Models (

src/models/

graph.ts

GraphModel

GraphNode

GraphEdge

validateGraph()

```
state.ts
```
-
```
StateSchema
```
(field definitions)

simulation.ts

ExecutionTrace

SimulationStep

GraphState

Store Architecture (

src/store/

```
graphStore.ts
```
- Nodes, edges, CRUD, selection, localStorage persistence
```
stateStore.ts
```
- State schema fields
```
simulationStore.ts
```
- Trace, playback state, current step

Feature Structure:

```
features/canvas/
```
- React Flow canvas, node renderers, inspector panels
```
features/state/
```
- State schema editor, field CRUD
```
features/sim/
```
- Step controls, trace list, state diff viewer
```
features/io/
```
- JSON export/import, toolbar

Services:

```
SimulationEngine
```
- Core simulation logic with deterministic edge ordering
```
conditionEvaluator
```
- Edge condition parsing and explanation generation

App Layout

3-column grid (

App.tsx

Left: State Schema Panel
Center: Canvas + Toolbar + Simulation Controls
Right: Node/Edge Inspector (when selected)

Path Aliases

@/*

→

./src/*

(configured in

vite.config.ts

and

tsconfig.json

)

Determinism Rules

Edge execution order: sorted by edge ID (ascending)
Router: fires first matching edge only
LoopGuard: blocks all if no conditions match
Cycle detection: tracks visited nodes in current path

Validation

Graph validation (

graph.ts:85

Requires at least one
```
Start
```
node
Requires at least one
```
End
```
node
Checks for orphaned edges
Detects duplicate node IDs

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Common Commands

# Development
npm run dev              # Start dev server on port 5173
npm run build            # TypeScript check + Vite build
npm run types            # TypeScript type check only
npm run lint             # ESLint
npm run preview          # Preview production build

# Testing
npm run test             # Vitest watch mode
npm run test:ui          # Vitest UI mode
npm run test:run         # Run tests once (watch=false)
npm run test:e2e:install # Install Playwright browsers
npm run test:e2e         # Run E2E tests
npm run test:e2e:ui      # Playwright UI mode

Code Style

File naming:
```
PascalCase.tsx
```
for components,
```
camelCase.ts
```
for utilities
Exports: Prefer named exports; default only for React components
Conventional Commits:
```
feat:
```
,
```
fix:
```
,
```
refactor:
```
,
```
test:
```
,
```
docs:
```
,
```
chore:
```

TypeScript: Strict mode enabled (

noUncheckedIndexedAccess

noUnusedLocals

noUnusedParameters

)

Test Conventions

Arrange-Act-Assert structure
Reset store state in
```
beforeEach
```
each test
Store tests:
```
useGraphStore.getState().clearGraph()
```
before each test
Mock external deps (localStorage, fetch)

Architecture

LangGraph Visual Modeler - A deterministic, explainable visual modeling environment for LangGraph applications. No backend execution required.

Tech Stack

Frontend: React 18 + TypeScript + Vite
Canvas: React Flow (node-edge graph modeling)
State: Zustand (graph, simulation, UI stores)
Storage: localStorage with auto-save

Core Concepts

7 Node Types:

Start

LLM

Tool

Router

Reducer

LoopGuard

End

Simulation Engine: Deterministic step-by-step execution with cycle detection, edge firing explanations, and immutable state snapshots. Mock execution for MVP (no real LLM calls).

Data Models (

src/models/

graph.ts

GraphModel

GraphNode

GraphEdge

validateGraph()

```
state.ts
```
-
```
StateSchema
```
(field definitions)

simulation.ts

ExecutionTrace

SimulationStep

GraphState

Store Architecture (

src/store/

```
graphStore.ts
```
- Nodes, edges, CRUD, selection, localStorage persistence
```
stateStore.ts
```
- State schema fields
```
simulationStore.ts
```
- Trace, playback state, current step

Feature Structure:

```
features/canvas/
```
- React Flow canvas, node renderers, inspector panels
```
features/state/
```
- State schema editor, field CRUD
```
features/sim/
```
- Step controls, trace list, state diff viewer
```
features/io/
```
- JSON export/import, toolbar

Services:

```
SimulationEngine
```
- Core simulation logic with deterministic edge ordering
```
conditionEvaluator
```
- Edge condition parsing and explanation generation

App Layout

3-column grid (

App.tsx

Left: State Schema Panel
Center: Canvas + Toolbar + Simulation Controls
Right: Node/Edge Inspector (when selected)

Path Aliases

@/*

→

./src/*

(configured in

vite.config.ts

and

tsconfig.json

)

Determinism Rules

Edge execution order: sorted by edge ID (ascending)
Router: fires first matching edge only
LoopGuard: blocks all if no conditions match
Cycle detection: tracks visited nodes in current path

Validation

Graph validation (

graph.ts:85

Requires at least one
```
Start
```
node
Requires at least one
```
End
```
node
Checks for orphaned edges
Detects duplicate node IDs

CLAUDE.md

CLAUDE.md

Common Commands

Code Style

Test Conventions

Architecture

Tech Stack

Core Concepts

App Layout

Path Aliases

Determinism Rules

Validation

Related Skills

Markdown Converter

Nano Banana Pro

1password

CLAUDE.md

Common Commands

Code Style

Test Conventions

Architecture

Tech Stack

Core Concepts

App Layout

Path Aliases

Determinism Rules

Validation