claude-dojo 1.0.0 → 1.0.1

package/README.md

@@ -1,160 +1,39 @@
-# Agent Office - Apple-Inspired Claude Code Visualization
+# Claude Dojo
 
-A beautifully designed visualization plugin for Claude Code that displays agents working in real-time with Apple's signature design aesthetic.
+A visual dashboard for Claude AI - watch agents work in a 3D hex-grid interface.
 
-## Features
+## Requirements
 
-### Design Philosophy
-- **Flat Minimalist Design**: Clean, uncluttered interface inspired by Apple's design language
-- **Smooth Animations**: Carefully crafted transitions using Apple's signature easing curves
-- **Typography**: System fonts optimized for clarity and elegance
-- **Color System**: Thoughtfully selected colors that work in both light and dark modes
-- **Responsive**: Adapts seamlessly to different screen sizes
+- Node.js >= 18.0.0
+- Anthropic API key
 
-### Visualization Elements
+## Setup
 
-#### Agent Cards
-Each agent is represented by a card showing:
-- **Avatar**: Emoji-based representation with animated glow effect when active
-- **Role Badge**: Clear identification of agent type
-- **Status Indicator**: Real-time status (Active, Idle, Thinking) with pulsing dot
-- **Current Task**: What the agent is currently working on
-- **Progress Bar**: Animated progress indicator with shimmer effect
-- **Activity Timeline**: Recent actions with timestamps
-
-#### Team Inbox
-- **Message Center**: Consolidated view of important notifications
-- **Badge Counter**: Unread message count
-- **Interactive Items**: Hover effects and smooth transitions
-
-## Design Details
-
-### Color Palette
-The plugin uses Apple's color system with role-specific colors:
-- **Researcher**: Blue (#007AFF) - Analysis and discovery
-- **Coder**: Purple (#5856D6) - Implementation work
-- **Reviewer**: Green (#34C759) - Quality assurance
-- **Explorer**: Pink (#FF2D55) - Navigation and exploration
-- **Planner**: Teal (#00C7BE) - Strategic planning
-- **Artist**: Orange (#FF9500) - Creative work
-
-### Animations
-All animations use Apple's signature timing functions:
-- **Swift**: `cubic-bezier(0.4, 0.0, 0.2, 1)` - For quick interactions
-- **Smooth**: `cubic-bezier(0.25, 0.1, 0.25, 1)` - For graceful transitions
-
-### Typography
-Uses the SF Pro system font stack with:
-- Font smoothing for crisp text rendering
-- Negative letter spacing for display sizes
-- Hierarchical font sizes from 11px to 48px
-
-## Usage
-
-### Opening the Visualization
-
-Simply open `agent-office-plugin.html` in any modern web browser:
+Set your Anthropic API key:
 
 ```bash
-open agent-office-plugin.html
-```
-
-Or drag the file into your browser window.
-
-### Customization
-
-#### Adding New Agents
-
-Edit the `agents` array in the JavaScript section:
-
-```javascript
-{
-    id: 'your-agent',
-    name: 'Agent Name',
-    role: 'Agent Role',
-    emoji: '🎯',
-    status: 'active', // 'active', 'idle', or 'thinking'
-    currentTask: 'Description of current task',
-    progress: 45,
-    activities: [
-        { time: '1m ago', text: 'Recent activity' },
-        { time: '3m ago', text: 'Previous activity' }
-    ]
-}
-```
-
-#### Custom Color Themes
-
-Add a new color theme in the CSS:
-
-```css
-.agent-card[data-agent="your-agent"] {
-    --agent-color: #YOUR_COLOR;
-    --agent-color-light: #LIGHTER_COLOR;
-}
+export ANTHROPIC_API_KEY="your-api-key-here"
 ```
 
-## Integration Ideas
-
-### Real-time Updates
-To connect with Claude Code's actual agent system:
-
-1. **WebSocket Connection**: Stream agent status updates
-2. **Server-Sent Events**: Push updates from Claude Code
-3. **Polling**: Periodically fetch agent status from an API endpoint
-
-### Example Integration Structure
-
-```javascript
-// Connect to Claude Code agent system
-const ws = new WebSocket('ws://localhost:8080/agent-status');
-
-ws.onmessage = (event) => {
-    const agentUpdate = JSON.parse(event.data);
-    updateAgentStatus(agentUpdate);
-};
+## Usage
 
-function updateAgentStatus(update) {
-    const agent = agents.find(a => a.id === update.agentId);
-    if (agent) {
-        agent.status = update.status;
-        agent.currentTask = update.task;
-        agent.progress = update.progress;
-        renderAgents();
-    }
-}
+```bash
+npx claude-dojo
 ```
 
-## Browser Compatibility
-
-- Chrome/Edge 90+
-- Safari 14+
-- Firefox 88+
-
-Optimized for modern browsers with CSS Grid, custom properties, and smooth animations.
-
-## Performance
-
-- Lightweight: Pure HTML/CSS/JS, no frameworks
-- Optimized animations using CSS transforms
-- Efficient DOM updates
-- Smooth 60fps animations
-
-## Dark Mode
-
-Automatically adapts to system preferences using `prefers-color-scheme` media query.
+This starts the server and opens the dashboard in your browser. From there you can:
+- Create and manage Claude sessions
+- Watch agents work in real-time on a 3D hex grid
+- View conversation history and tool executions
+- Track token usage
 
-## Future Enhancements
+## Keyboard Shortcuts
 
-- [ ] Agent collaboration visualization (connections between agents)
-- [ ] Performance metrics dashboard
-- [ ] Interactive agent controls (pause, resume, prioritize)
-- [ ] Export activity logs
-- [ ] Customizable themes
-- [ ] Sound notifications
-- [ ] Real-time code diff viewer
-- [ ] Agent chat/messaging interface
+| Key | Action |
+|-----|--------|
+| `1-9` | Select session by index |
+| `Esc` | Deselect current session |
 
-## Credits
+## License
 
-Designed with inspiration from Apple's Human Interface Guidelines and macOS Big Sur design language.
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-dojo",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A visual agent dashboard for Claude - watch AI agents work in a 3D hex-grid interface",
   "type": "module",
   "bin": {