468 lines
16 KiB
Markdown
468 lines
16 KiB
Markdown
# Claude Code Developer Tools - Progressive Specification
|
|
|
|
## Core Challenge
|
|
|
|
Create **self-contained web-based developer tools** that enable observability, search, coordination, and shared memory across Claude Code instances. Each tool should progressively build upon web-learned techniques to create increasingly sophisticated systems for understanding and orchestrating AI coding sessions.
|
|
|
|
## Output Requirements
|
|
|
|
**File Naming**: `claude_devtool_[iteration_number].html`
|
|
|
|
**Content Structure**: Complete self-contained HTML tool with inline CSS and JavaScript
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>[Tool Name] - Claude Code DevTools</title>
|
|
<style>
|
|
/* Modern developer-focused UI */
|
|
/* Dark theme by default with light mode option */
|
|
/* Code syntax highlighting */
|
|
/* Responsive layouts for data visualization */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>[Tool Name]</h1>
|
|
<p class="tagline">[Tool Purpose]</p>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Tool Interface -->
|
|
<section class="tool-interface">
|
|
<!-- Interactive controls -->
|
|
<!-- Data input/connection areas -->
|
|
<!-- Real-time visualization -->
|
|
</section>
|
|
|
|
<!-- Results/Output Area -->
|
|
<section class="results">
|
|
<!-- Search results, analytics, visualizations -->
|
|
<!-- Export capabilities -->
|
|
</section>
|
|
|
|
<!-- Documentation -->
|
|
<section class="docs">
|
|
<h2>About This Tool</h2>
|
|
<div class="doc-content">
|
|
<h3>Purpose</h3>
|
|
<p>[What problem this solves]</p>
|
|
|
|
<h3>Features</h3>
|
|
<ul>
|
|
<li>[Feature 1]</li>
|
|
<li>[Feature 2]</li>
|
|
</ul>
|
|
|
|
<h3>Web Research Integration</h3>
|
|
<p><strong>Source:</strong> [URL]</p>
|
|
<p><strong>Techniques Applied:</strong></p>
|
|
<ul>
|
|
<li>[Technique 1 from web source]</li>
|
|
<li>[Technique 2 from web source]</li>
|
|
</ul>
|
|
|
|
<h3>Usage</h3>
|
|
<ol>
|
|
<li>[Step 1]</li>
|
|
<li>[Step 2]</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Claude Code DevTools | Generated via web-enhanced infinite loop</p>
|
|
<p>Web Source: <a href="[URL]">[URL]</a></p>
|
|
</footer>
|
|
|
|
<script>
|
|
// All JavaScript inline - no external dependencies
|
|
// Core functionality implementation
|
|
// Web API integration (localStorage, IndexedDB, etc.)
|
|
// Real-time data processing
|
|
// Visualization rendering
|
|
// Export capabilities
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Tool Categories & Progressive Evolution
|
|
|
|
### **Foundation Tools (Iterations 1-5): Data Access & Visualization**
|
|
|
|
**Focus**: Basic transcript reading, parsing, and simple visualizations
|
|
|
|
**Example Tools**:
|
|
- **Transcript Viewer**: Load and display Claude Code JSONL transcripts with syntax highlighting
|
|
- **Session Timeline**: Visualize conversation flow over time with message markers
|
|
- **Tool Usage Chart**: Bar chart showing which tools were used and how often
|
|
- **Search Interface**: Simple keyword search across transcript content
|
|
- **Export Utility**: Convert JSONL to JSON, CSV, or Markdown formats
|
|
|
|
**Web Learning Focus**:
|
|
- File API and FileReader for local file handling
|
|
- LocalStorage and IndexedDB for data persistence
|
|
- Canvas or SVG for basic charts
|
|
- CSS Grid and Flexbox for layouts
|
|
- JSON parsing and data transformation
|
|
|
|
### **Intermediate Tools (Iterations 6-12): Advanced Search & Analytics**
|
|
|
|
**Focus**: Sophisticated search, filtering, pattern detection, and analytics
|
|
|
|
**Example Tools**:
|
|
- **Multi-Facet Search**: Fuzzy search, regex patterns, field-specific filtering
|
|
- **Conversation Graph**: Node-link diagram showing message relationships (parent-child)
|
|
- **Productivity Dashboard**: Analytics on coding velocity, tool efficiency, session patterns
|
|
- **Error Pattern Detector**: Identify and categorize common errors across sessions
|
|
- **Code Extraction Tool**: Pull out all code blocks from conversations with syntax highlighting
|
|
- **Session Comparator**: Side-by-side comparison of different coding sessions
|
|
|
|
**Web Learning Focus**:
|
|
- Advanced regex and fuzzy matching algorithms
|
|
- D3.js or similar for interactive visualizations
|
|
- WebWorkers for performance with large datasets
|
|
- Advanced filtering and sorting algorithms
|
|
- Statistical analysis and pattern recognition
|
|
|
|
### **Advanced Tools (Iterations 13-20): Coordination & Communication**
|
|
|
|
**Focus**: Multi-instance coordination, shared memory, real-time collaboration
|
|
|
|
**Example Tools**:
|
|
- **Session Orchestrator**: Coordinate multiple Claude Code instances on different tasks
|
|
- **Shared Context Manager**: Maintain shared knowledge base across instances
|
|
- **Cross-Instance Search**: Search transcripts from multiple machines/projects
|
|
- **Collaboration Board**: Real-time task assignment and progress tracking
|
|
- **Knowledge Graph Builder**: Build interconnected knowledge from all conversations
|
|
- **MCP Server Monitor**: Track and visualize MCP server activity across instances
|
|
- **Agent Communication Hub**: Message passing between different Claude agents
|
|
|
|
**Web Learning Focus**:
|
|
- WebSocket and Server-Sent Events for real-time communication
|
|
- SharedArrayBuffer for advanced memory sharing
|
|
- Service Workers for background sync
|
|
- IndexedDB for large-scale data storage
|
|
- Broadcast Channel API for tab communication
|
|
- WebRTC for peer-to-peer coordination
|
|
|
|
### **Expert Tools (Iterations 21+): AI-Enhanced & Predictive Systems**
|
|
|
|
**Focus**: Machine learning integration, predictive analytics, automated workflows
|
|
|
|
**Example Tools**:
|
|
- **Smart Context Recommender**: Suggest relevant past conversations for current task
|
|
- **Predictive Tool Selector**: Predict which tools will be needed next
|
|
- **Workflow Automation Builder**: Record and replay common coding patterns
|
|
- **Anomaly Detector**: Identify unusual patterns or potential issues
|
|
- **Session Optimizer**: Suggest improvements based on past successful patterns
|
|
- **Auto-Tagger**: Automatically categorize and tag conversations
|
|
- **Semantic Search**: Vector-based similarity search across all transcripts
|
|
|
|
**Web Learning Focus**:
|
|
- TensorFlow.js for in-browser ML
|
|
- Vector embeddings and similarity search
|
|
- Natural language processing libraries
|
|
- Recommendation algorithms
|
|
- Clustering and classification techniques
|
|
- Automated pattern recognition
|
|
|
|
## Design Principles
|
|
|
|
### **Developer-First Design**
|
|
- **Dark Theme Primary**: Easy on eyes during long coding sessions
|
|
- **Monospace Fonts**: Code-friendly typography
|
|
- **Syntax Highlighting**: Proper code colorization in all contexts
|
|
- **Keyboard Shortcuts**: Power-user keyboard navigation
|
|
- **Copy-Friendly**: Easy to copy data, code, commands
|
|
- **Performance Focused**: Fast load, responsive interactions
|
|
|
|
### **Self-Contained Architecture**
|
|
- **No External Dependencies**: All code inline (CSS, JS, data processing)
|
|
- **Offline Capable**: Works without internet after initial load
|
|
- **Browser Storage**: Leverage localStorage, IndexedDB for persistence
|
|
- **File API Integration**: Direct file access where browser supports it
|
|
- **Progressive Enhancement**: Basic functionality without advanced features
|
|
|
|
### **Data Integration Strategies**
|
|
|
|
**Claude Code Transcript Format**:
|
|
```json
|
|
{
|
|
"uuid": "message-uuid",
|
|
"sessionId": "session-id",
|
|
"timestamp": "2025-10-09T18:00:00Z",
|
|
"message": {
|
|
"role": "user|assistant",
|
|
"content": "message content or array of content blocks"
|
|
},
|
|
"type": "user|assistant|meta|tool",
|
|
"cwd": "/working/directory",
|
|
"version": "1.0.0",
|
|
"gitBranch": "main"
|
|
}
|
|
```
|
|
|
|
**Tool Should Handle**:
|
|
- JSONL line-by-line parsing
|
|
- Message threading via parent-child relationships
|
|
- Tool call extraction from content blocks
|
|
- Usage statistics calculation
|
|
- Multi-session aggregation
|
|
- Export to multiple formats
|
|
|
|
### **Observability Features**
|
|
|
|
**What to Track**:
|
|
- Session duration and message counts
|
|
- Tool usage frequency and success rates
|
|
- Model used and token consumption
|
|
- Error patterns and resolution times
|
|
- Working directory and git branch context
|
|
- File read/write operations
|
|
- Command executions
|
|
- Search query patterns
|
|
|
|
**Visualization Types**:
|
|
- Timeline views of session activity
|
|
- Network graphs of message relationships
|
|
- Heatmaps of activity by time/day
|
|
- Bar/pie charts for tool usage
|
|
- Scatter plots for correlation analysis
|
|
- Tree maps for hierarchical data
|
|
|
|
### **Search Capabilities**
|
|
|
|
**Search Modes**:
|
|
- Full-text search across all content
|
|
- Regex pattern matching
|
|
- Fuzzy matching for typo tolerance
|
|
- Field-specific search (content, session ID, tools, etc.)
|
|
- Date range filtering
|
|
- Role-based filtering (user vs assistant)
|
|
- Tool-based filtering
|
|
- Model-based filtering
|
|
|
|
**Result Features**:
|
|
- Contextual snippets with highlighting
|
|
- Score-based ranking
|
|
- Grouped by session
|
|
- Exportable results
|
|
- Result caching for performance
|
|
|
|
### **Coordination Mechanisms**
|
|
|
|
**Cross-Instance Communication**:
|
|
- Shared localStorage namespace conventions
|
|
- IndexedDB for larger shared datasets
|
|
- File-based message passing (watch directories)
|
|
- WebSocket server for real-time sync
|
|
- Broadcast Channel for same-origin tabs
|
|
|
|
**Shared Memory Patterns**:
|
|
- Central knowledge base structure
|
|
- Version control for concurrent edits
|
|
- Conflict resolution strategies
|
|
- Cache invalidation protocols
|
|
- State synchronization methods
|
|
|
|
## Progressive Web Learning Integration
|
|
|
|
### **Foundation Level (Iterations 1-5)**
|
|
|
|
**Web Resources to Learn From**:
|
|
- MDN Web Docs on File API and FileReader
|
|
- LocalStorage and IndexedDB tutorials
|
|
- Canvas and SVG chart examples
|
|
- JSON parsing best practices
|
|
- Responsive CSS Grid/Flexbox layouts
|
|
|
|
**Techniques to Apply**:
|
|
- File reading and parsing patterns
|
|
- Data storage strategies
|
|
- Basic visualization techniques
|
|
- Clean UI component design
|
|
- Error handling patterns
|
|
|
|
### **Intermediate Level (Iterations 6-12)**
|
|
|
|
**Web Resources to Learn From**:
|
|
- D3.js documentation and examples
|
|
- Observable notebooks for visualization
|
|
- Advanced search algorithm implementations
|
|
- Performance optimization guides
|
|
- WebWorker usage patterns
|
|
|
|
**Techniques to Apply**:
|
|
- Interactive data visualizations
|
|
- Efficient search algorithms
|
|
- Background processing with workers
|
|
- Advanced filtering techniques
|
|
- Statistical analysis methods
|
|
|
|
### **Advanced Level (Iterations 13-20)**
|
|
|
|
**Web Resources to Learn From**:
|
|
- WebSocket and SSE real-time communication
|
|
- Service Worker documentation
|
|
- Broadcast Channel API guides
|
|
- WebRTC peer-to-peer examples
|
|
- Advanced IndexedDB patterns
|
|
|
|
**Techniques to Apply**:
|
|
- Real-time synchronization
|
|
- Background sync strategies
|
|
- Cross-tab communication
|
|
- P2P data sharing
|
|
- Large-scale data management
|
|
|
|
### **Expert Level (Iterations 21+)**
|
|
|
|
**Web Resources to Learn From**:
|
|
- TensorFlow.js tutorials
|
|
- Vector search implementations
|
|
- NLP in JavaScript guides
|
|
- ML model optimization
|
|
- Recommendation system patterns
|
|
|
|
**Techniques to Apply**:
|
|
- In-browser machine learning
|
|
- Semantic search algorithms
|
|
- Predictive analytics
|
|
- Automated categorization
|
|
- Pattern recognition
|
|
|
|
## Quality Standards
|
|
|
|
### **Functionality**
|
|
- Tool must solve a real Claude Code developer need
|
|
- Must handle realistic data volumes (1000+ messages)
|
|
- Must provide clear value over manual approaches
|
|
- Error handling for malformed data
|
|
- Graceful degradation for missing data
|
|
|
|
### **Usability**
|
|
- Intuitive interface requiring no documentation to start
|
|
- Clear visual hierarchy and information architecture
|
|
- Responsive design for different screen sizes
|
|
- Accessible (keyboard navigation, screen readers)
|
|
- Fast initial load and responsive interactions
|
|
|
|
### **Code Quality**
|
|
- Clean, well-commented JavaScript
|
|
- Organized CSS with consistent naming
|
|
- Efficient algorithms and data structures
|
|
- No memory leaks or performance issues
|
|
- Browser compatibility (modern browsers)
|
|
|
|
### **Documentation**
|
|
- Clear tool purpose statement
|
|
- Feature list with examples
|
|
- Web source attribution with specifics
|
|
- Techniques learned and applied
|
|
- Usage instructions
|
|
|
|
### **Web Integration**
|
|
- Must cite specific web source URL
|
|
- Must demonstrate 1-3 specific techniques from source
|
|
- Must show how web learning improved the tool
|
|
- Should build on techniques from previous iterations
|
|
- Must document what was learned
|
|
|
|
## Iteration Examples
|
|
|
|
### **Example 1: Session Timeline Viewer (Foundation)**
|
|
**Web Source**: MDN Canvas Tutorial
|
|
**Techniques Applied**:
|
|
- Canvas API for rendering timeline
|
|
- RequestAnimationFrame for smooth scrolling
|
|
- Mouse event handling for interaction
|
|
**Features**:
|
|
- Horizontal timeline of session messages
|
|
- Color-coded by message role
|
|
- Hover for message preview
|
|
- Click to expand full message
|
|
|
|
### **Example 7: Conversation Graph Visualizer (Intermediate)**
|
|
**Web Source**: D3.js Force-Directed Graph Tutorial
|
|
**Techniques Applied**:
|
|
- D3 force simulation for node layout
|
|
- Drag interactions for node repositioning
|
|
- SVG path generation for message links
|
|
**Features**:
|
|
- Interactive node-link diagram
|
|
- Parent-child message relationships
|
|
- Tool usage indicators on nodes
|
|
- Zoom and pan controls
|
|
|
|
### **Example 15: Shared Context Manager (Advanced)**
|
|
**Web Source**: IndexedDB API Guide
|
|
**Techniques Applied**:
|
|
- IndexedDB for cross-session storage
|
|
- Broadcast Channel for tab sync
|
|
- Structured cloning for data transfer
|
|
**Features**:
|
|
- Central knowledge base across instances
|
|
- Real-time updates when data changes
|
|
- Query interface for context retrieval
|
|
- Export/import for sharing
|
|
|
|
### **Example 23: Smart Context Recommender (Expert)**
|
|
**Web Source**: TensorFlow.js Text Classification
|
|
**Techniques Applied**:
|
|
- Universal Sentence Encoder for embeddings
|
|
- Cosine similarity for relevance scoring
|
|
- K-nearest neighbors for recommendations
|
|
**Features**:
|
|
- Semantic search across all sessions
|
|
- Context similarity scoring
|
|
- Automatic related-session suggestions
|
|
- Learning from usage patterns
|
|
|
|
## Ultra-Thinking Directive
|
|
|
|
Before each tool creation, deeply consider:
|
|
|
|
**Problem Space**:
|
|
- What specific pain point does this solve for Claude Code users?
|
|
- How do developers currently handle this need manually?
|
|
- What would make this tool indispensable?
|
|
- How does this fit into the broader developer workflow?
|
|
|
|
**Web Learning Integration**:
|
|
- What web techniques would most benefit this tool?
|
|
- How can the assigned URL's teachings be applied creatively?
|
|
- What patterns from the web source are most valuable?
|
|
- How can we adapt web examples to our specific use case?
|
|
|
|
**Technical Approach**:
|
|
- What's the most efficient data structure for this tool?
|
|
- How do we handle large datasets without performance issues?
|
|
- What browser APIs provide the best capabilities?
|
|
- How do we ensure offline functionality?
|
|
|
|
**User Experience**:
|
|
- How can we make complex data immediately understandable?
|
|
- What visualizations best convey the information?
|
|
- How do we balance power-user features with simplicity?
|
|
- What keyboard shortcuts would power users want?
|
|
|
|
**Progressive Enhancement**:
|
|
- How does this build on previous tool iterations?
|
|
- What techniques from earlier tools can be reused?
|
|
- How does this enable future tool possibilities?
|
|
- What knowledge does this add to our toolkit?
|
|
|
|
**Generate tools that are:**
|
|
- **Immediately Useful**: Solve real problems developers face today
|
|
- **Progressively Enhanced**: Each iteration more sophisticated than the last
|
|
- **Web-Informed**: Demonstrably improved by web research
|
|
- **Self-Contained**: Work perfectly as standalone HTML files
|
|
- **Developer-Friendly**: Built by developers, for developers
|
|
- **Future-Ready**: Enable coordination and advanced workflows
|