Add claude-opus-4-7; multi-model token counter

[simonw]

find everything that has a list of Claude models and add claude-opus-4-7

modify the token counter tool so that it can be used to compare token counts against multiple models - add claude-opus-4-7 claude-opus-4-6 claude-opus-4-5 claude-sonnet-4-6 and claude-haiku-4-5 as options, each with a checkbox, and default to checknig just the 4-7 one - but users can select additional checkboxes. The Count Tokens button then runs separate against all that are checked and displays the results along with a 1.2x indicator showing how much more each one is than the one that scored lowest

• Add claude-opus-4-7 to model lists in llm-lib.html and omit-needless-words.html
• Rewrite claude-token-counter.html to compare token counts across multiple
  models via checkboxes (opus-4-7, opus-4-6, opus-4-5, sonnet-4-6, haiku-4-5).
  Defaults to opus-4-7 checked. Results shown as a table with an Nx multiplier
  indicator relative to the lowest token count.

https://claude.ai/code/session_01XKgSSPmvN3d5wDwFvgKgsn

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

Todo List:

• Read and analyze claude-token-counter.html changes
• Review llm-lib.html modifications
• Check omit-needless-words.html updates
• Assess code quality and best practices
• Look for potential bugs or issues
• Evaluate performance considerations
• Check for security concerns
• Provide comprehensive feedback

---

Review Summary

This PR successfully adds Claude Opus 4.7 model support and implements a well-designed multi-model token counter comparison feature. The code quality is excellent overall with only minor suggestions for improvement.

✅ Strengths

Excellent Multi-Model Implementation

• Clean Architecture: The refactor from single-model to multi-model comparison is well-structured
• Great UX: Checkbox-based model selection with sensible default (opus-4-7)
• Clear Results Display: Table format with multiplier badges provides excellent comparison visualization
• Robust Error Handling: Individual model failures don't break the entire comparison

Code Quality

• Consistent Styling: All three files follow established CSS patterns and naming conventions
• Good Separation of Concerns: Clear separation between UI, API calls, and result rendering
• Proper HTML Structure: Semantic markup with accessibility considerations

Security Best Practices

• XSS Protection: Proper HTML escaping in escapeHtml() function (claude-token-counter.html:356-363)
• Safe API Key Handling: Consistent localStorage usage across all files
• Input Validation: Appropriate validation for required fields

🔍 Minor Issues & Suggestions

Performance Considerations

1. Concurrent API Calls (claude-token-counter.html:423-430)

   • Current: Uses Promise.all() for concurrent requests ✅
   • Good practice: This is optimal for performance

2. DOM Updates

   • Suggestion: Consider batching DOM updates in the results rendering, though current implementation is fine for typical use cases

Code Quality Improvements

1. Magic Numbers (claude-token-counter.html:206-212)

   const MODELS = [
     'claude-opus-4-7',
     'claude-opus-4-6',
     // ... other models
   ]

   • Suggestion: Consider moving model list to a configuration object for easier maintenance

2. Error Message Consistency

   • claude-token-counter.html:406: "Select at least one model to compare."
   • Suggestion: Consistent error message styling across all validation cases

3. Button State Management (claude-token-counter.html:417)

   countButton.disabled = true

   • Good: Proper button state management to prevent double-clicks ✅

Minor Bug Prevention

1. Division by Zero Protection (claude-token-counter.html:326-328)

   const minTokens = successful.length
     ? Math.min(...successful.map(r => r.tokens))
     : null

   • Good: Already handles empty successful results ✅

2. Model Validation

   • Suggestion: Add validation to ensure selected models exist in MODELS array, though current implementation is robust

User Experience Enhancements

1. Loading States

   • Good: Shows "Counting tokens..." message during API calls ✅
   • Suggestion: Could add individual model loading indicators for long requests

2. Model Selection Persistence

   • Suggestion: Consider saving user's model preferences to localStorage

🔒 Security Assessment

• API Key Storage: ✅ Proper localStorage usage
• XSS Prevention: ✅ HTML escaping implemented
• Input Validation: ✅ Appropriate validation
• CORS Headers: ✅ Proper anthropic-dangerous-direct-browser-access usage

📋 Model Addition Verification

All model additions are correctly implemented:

• llm-lib.html:223: claude-opus-4-7 added to Anthropic optgroup ✅
• llm-lib.html:336: Added to providerModels.anthropic array ✅
• omit-needless-words.html:463: Added to model dropdown ✅
• claude-token-counter.html:207: Added to MODELS array as first/default option ✅

🎯 Test Coverage Considerations

While no automated tests are present (typical for HTML tools), consider testing:

• Multi-model selection combinations
• Error handling with invalid API keys
• Large text inputs
• Network failure scenarios
• Model availability changes

📝 Recommendations

1. Documentation: Consider adding inline comments for complex logic like the multiplier calculation
2. Accessibility: All files have good semantic HTML structure
3. Maintainability: The modular approach makes future model additions straightforward

⚡ Performance & Scalability

• Concurrent Requests: ✅ Optimal implementation
• Memory Usage: ✅ No obvious memory leaks
• DOM Manipulation: ✅ Efficient updates
• Network Efficiency: ✅ Proper error boundaries prevent cascading failures

---

🎉 Overall Assessment

This is a high-quality PR that successfully implements the requested features with excellent code practices. The multi-model token counter is well-designed, user-friendly, and maintainable. The code follows established patterns and includes appropriate error handling and security measures.

Recommendation: ✅ Approve

[simonw]

[simonw]

Wrote about this here: https://simonwillison.net/2026/Apr/20/claude-token-counts/