claude-mpm 4.25.10__py3-none-any.whl → 5.1.8__py3-none-any.whl

claude_mpm/d2/README.md

@@ -1,232 +0,0 @@
-# Claude MPM Dashboard 2.0
-
-Modern Svelte 5-based dashboard for Claude Multi-Agent Project Manager with real-time event monitoring via Socket.IO.
-
-## Features
-
-- **Svelte 5 Runes API**: Modern reactive state management with `$state`, `$derived`, and `$effect`
-- **Real-time Events**: Socket.IO integration for live Claude Code hook events
-- **Event Timeline**: Display and inspect incoming events with expandable details
-- **Connection Status**: Visual connection indicator with auto-reconnect
-- **Responsive Layout**: Clean two-column layout with navigation sidebar
-- **Dark Theme**: Modern dark UI optimized for long-term use
-
-## Technology Stack
-
-- **Svelte 5** - Modern reactive UI framework with Runes API
-- **Vite** - Fast build tool and dev server
-- **Socket.IO Client v4.7.5** - Real-time WebSocket communication
-- **Modern CSS** - Grid/Flexbox layout with smooth transitions
-
-## Prerequisites
-
-- Node.js 18+ and npm
-- Claude MPM monitor server running on port 8765
-
-## Setup
-
-1. **Install dependencies**:
-   ```bash
-   cd src/claude_mpm/dashboard2
-   npm install
-   ```
-
-2. **Start development server**:
-   ```bash
-   npm run dev
-   ```
-   The dev server will start at `http://localhost:5173`
-
-3. **Build for production**:
-   ```bash
-   npm run build
-   ```
-   Output will be in `dist/` directory
-
-## Configuration
-
-### Socket.IO Connection
-
-By default, the dashboard connects to `http://localhost:8765`. To change this, edit:
-
-```javascript
-// src/stores/socket.svelte.js
-const DEFAULT_PORT = 8765;
-const DEFAULT_HOST = 'localhost';
-```
-
-### Event Buffer Size
-
-Events are limited to the last 1000 events. To adjust:
-
-```javascript
-// src/stores/events.svelte.js
-const MAX_EVENTS = 1000;
-```
-
-## Project Structure
-
-```
-dashboard2/
-├── package.json              # Dependencies and scripts
-├── vite.config.js           # Vite build configuration
-├── public/
-│   └── index.html           # HTML template
-├── src/
-│   ├── main.js              # Entry point
-│   ├── App.svelte           # Main app component
-│   ├── components/
-│   │   ├── Header.svelte    # Top header with connection status
-│   │   ├── Sidebar.svelte   # Navigation sidebar
-│   │   ├── MainContent.svelte  # Content area switcher
-│   │   └── tabs/
-│   │       └── EventsTab.svelte  # Events timeline tab
-│   ├── stores/
-│   │   ├── socket.svelte.js  # Socket.IO connection store
-│   │   └── events.svelte.js  # Events buffer store
-│   └── lib/
-│       └── socketio.js      # Socket.IO client wrapper
-└── dist/                    # Build output (generated)
-```
-
-## Architecture
-
-### Svelte 5 Runes
-
-This dashboard uses Svelte 5's modern Runes API:
-
-- **`$state()`**: Reactive local state
-- **`$derived()`**: Computed values that update automatically
-- **`$effect()`**: Side effects with automatic cleanup
-- **`$bindable()`**: Two-way binding for component props
-
-### Socket.IO Events
-
-The dashboard listens for these Socket.IO events:
-
-- **`claude_event`**: Main event channel for Claude Code hook events
-- **`heartbeat`**: Server heartbeat every 3 minutes
-- **Connection events**: `connect`, `disconnect`, `reconnect_attempt`, etc.
-
-### Event Format
-
-Events received from Socket.IO have this structure:
-
-```javascript
-{
-  "source": "hook" | "system" | "api",
-  "type": "hook" | "session" | "agent" | "tool",
-  "subtype": "user_prompt" | "pre_tool" | "post_tool" | "subagent_start" | "subagent_stop",
-  "timestamp": "2025-11-20T12:34:56.789Z",
-  "session_id": "session-uuid-here",
-  "data": {
-    // Event-specific data
-  }
-}
-```
-
-## Development
-
-### Running Dev Server
-
-```bash
-npm run dev
-```
-
-Features:
-- Hot Module Replacement (HMR)
-- Instant updates on file changes
-- Source maps for debugging
-
-### Building for Production
-
-```bash
-npm run build
-```
-
-Outputs optimized, minified bundle to `dist/`:
-- `index.html` - Main HTML file
-- `assets/*.js` - Bundled JavaScript
-- `assets/*.css` - Bundled CSS
-
-### Preview Production Build
-
-```bash
-npm run preview
-```
-
-Serves the production build locally for testing.
-
-## Integration with Flask
-
-The Flask server will serve the built Svelte app from the `dist/` directory:
-
-```python
-@app.route('/dashboard2')
-def dashboard2():
-    return send_from_directory('dashboard2/dist', 'index.html')
-
-@app.route('/dashboard2/<path:path>')
-def dashboard2_assets(path):
-    return send_from_directory('dashboard2/dist', path)
-```
-
-## Future Enhancements
-
-### Implemented
-- ✅ Events tab with real-time display
-- ✅ Socket.IO connection management
-- ✅ Event filtering and clearing
-- ✅ Connection status indicator
-- ✅ Auto-scroll to newest events
-
-### Planned
-- 🔲 Agents tab - Monitor active agents
-- 🔲 Files tab - Track file operations
-- 🔲 Tools tab - View tool executions
-- 🔲 Activity tab - System metrics and analytics
-- 🔲 Event search and advanced filtering
-- 🔲 Export events to JSON/CSV
-- 🔲 Customizable event notifications
-- 🔲 Dark/light theme toggle
-- 🔲 Configurable Socket.IO connection settings
-
-## Troubleshooting
-
-### Socket.IO Connection Fails
-
-1. **Check server is running**:
-   ```bash
-   curl http://localhost:8765/health
-   ```
-
-2. **Check port availability**:
-   ```bash
-   lsof -i :8765
-   ```
-
-3. **Check browser console** for connection errors
-
-### Events Not Appearing
-
-1. **Verify Socket.IO connection status** in header (should show "Connected")
-2. **Check browser console** for incoming events
-3. **Trigger a Claude Code event** to generate test data
-4. **Check Socket.IO server logs** for event emissions
-
-### Build Errors
-
-1. **Clear node_modules and reinstall**:
-   ```bash
-   rm -rf node_modules package-lock.json
-   npm install
-   ```
-
-2. **Check Node.js version** (requires 18+):
-   ```bash
-   node --version
-   ```
-
-## License
-
-Part of Claude MPM project.

claude_mpm/d2/STORE_FIX_SUMMARY.md

@@ -1,167 +0,0 @@
-# D2 Dashboard Store Architecture Fix
-
-## Problem Identified
-
-**Error**: `effect_orphan` - Svelte 5 runes being used outside component context
-**Location**: `src/stores/socket.svelte.js` and `src/stores/events.svelte.js`
-**Impact**: Complete application failure - black screen, no UI rendering
-
-## Root Cause
-
-The stores were using Svelte 5 runes (`$state`, `$derived`) in factory functions called at module-load time:
-
-```javascript
-// ❌ WRONG - Causes effect_orphan error
-function createSocketStore() {
-  let connected = $state(false);           // Called at module level
-  let reconnecting = $state(false);        // Not in component context
-  let statusText = $derived(...);          // Effect created outside component
-  // ...
-}
-
-export const socketStore = createSocketStore(); // ❌ Called when module loads
-```
-
-**Why This Fails**:
-- Svelte 5 runes must be initialized during component setup
-- Module-level store creation happens before any component mounts
-- Runes are "orphaned" from component lifecycle
-- App fails to mount, showing black screen
-
-## Solution Implemented
-
-Refactored to use **traditional Svelte stores** (`writable`, `derived`) for module-level stores.
-
-### Files Changed
-
-1. **Created**: `src/stores/socket.js` (renamed from `socket.svelte.js`)
-   - Uses `writable()` instead of `$state()`
-   - Uses `derived()` instead of `$derived()`
-   - Exports stores with `subscribe` methods for Svelte auto-subscription
-
-2. **Created**: `src/stores/events.js` (renamed from `events.svelte.js`)
-   - Same pattern: `writable()` and `derived()` instead of runes
-   - Proper store updates using `.set()` and `.update()`
-
-3. **Updated**: `src/App.svelte`
-   - Changed imports from `.svelte.js` to `.js`
-   - Uses `$` auto-subscription syntax: `$socketStore.statusText`
-
-4. **Updated**: `src/components/Header.svelte`
-   - Removed unused store import
-   - Props now receive values from parent
-
-5. **Updated**: `src/components/tabs/EventsTab.svelte`
-   - Changed import from `.svelte.js` to `.js`
-   - Uses `$` auto-subscription: `$eventsStore.count`
-
-6. **Deleted**: Old `.svelte.js` files removed
-
-### Code Comparison
-
-**Before (Broken)**:
-```javascript
-function createSocketStore() {
-  let connected = $state(false);
-  let statusText = $derived(connected ? 'Connected' : 'Disconnected');
-  // ...
-}
-```
-
-**After (Fixed)**:
-```javascript
-import { writable, derived } from 'svelte/store';
-
-function createSocketStore() {
-  const connected = writable(false);
-  const statusText = derived(connected, ($connected) =>
-    $connected ? 'Connected' : 'Disconnected'
-  );
-  // ...
-}
-```
-
-### Usage in Components
-
-**Before (Broken)**:
-```svelte
-<Header
-  statusText={socketStore.statusText}
-  statusColor={socketStore.statusColor}
-/>
-```
-
-**After (Fixed)**:
-```svelte
-<Header
-  statusText={$socketStore.statusText}
-  statusColor={$socketStore.statusColor}
-/>
-```
-
-## Verification
-
-### Build Status
-✅ Build successful with no errors
-✅ No `effect_orphan` warnings in output
-✅ Bundle size: 81.01 kB (27.93 kB gzipped)
-
-### Test Results
-All automated tests passed:
-- ✅ New store files exist (`socket.js`, `events.js`)
-- ✅ Old `.svelte.js` files removed
-- ✅ Stores use `writable`/`derived` from `svelte/store`
-- ✅ No rune usage in store files
-- ✅ Components use correct imports
-- ✅ Components use `$` auto-subscription syntax
-
-## Key Learnings
-
-### When to Use Svelte 5 Runes
-✅ **Use runes IN components**:
-- Component-local state: `let count = $state(0)`
-- Component-local derived: `let doubled = $derived(count * 2)`
-- Component effects: `$effect(() => { ... })`
-
-❌ **DO NOT use runes at module level**:
-- Global stores
-- Shared state between components
-- Anything created outside component context
-
-### When to Use Traditional Stores
-✅ **Use traditional stores for**:
-- Module-level reactive state
-- Shared state across components
-- Store factories called at import time
-- Any store created outside components
-
-### Svelte 5 Architecture Rule
-**Critical**: Runes (`$state`, `$derived`, `$effect`) can ONLY be used inside component `<script>` blocks. For module-level stores, use traditional Svelte stores (`writable`, `derived`, `readable`).
-
-## Impact Metrics
-
-- **Net LOC Impact**: +6 lines (due to more explicit store API)
-- **Files Modified**: 5
-- **Files Deleted**: 2
-- **Build Time**: 268ms (unchanged)
-- **Bundle Size**: 81KB (unchanged)
-- **Functionality**: 100% preserved
-
-## Future Recommendations
-
-1. **Documentation**: Add comments to all store files explaining why traditional stores are used
-2. **Linting**: Configure ESLint to warn against runes in non-component files
-3. **Training**: Educate team on Svelte 5 component vs module-level patterns
-4. **Review**: Audit other projects for similar issues
-
-## References
-
-- Svelte 5 Runes Documentation: https://svelte.dev/docs/svelte/$state
-- Svelte Stores Documentation: https://svelte.dev/docs/svelte-store
-- Issue Discussion: https://github.com/sveltejs/svelte/discussions/effect-orphan
-
----
-
-**Fixed By**: Claude Code Engineer
-**Date**: 2025-11-20
-**Status**: ✅ RESOLVED

claude_mpm/d2/SVELTE5_STORES_GUIDE.md

@@ -1,180 +0,0 @@
-# Svelte 5 Store Architecture Guide
-
-## Quick Decision Tree
-
-```
-Do you need reactive state?
-│
-├─ YES → Is it used inside a component <script> block?
-│        │
-│        ├─ YES → Use Svelte 5 Runes ✅
-│        │        let count = $state(0)
-│        │        let doubled = $derived(count * 2)
-│        │
-│        └─ NO → Is it at module level / shared between components?
-│                 │
-│                 └─ YES → Use Traditional Stores ✅
-│                          const count = writable(0)
-│                          const doubled = derived(count, $count => $count * 2)
-│
-└─ NO → Use regular JavaScript variables
-```
-
-## Pattern 1: Component-Local State (Use Runes)
-
-```svelte
-<!-- Component.svelte -->
-<script>
-  // ✅ CORRECT - Runes in component context
-  let count = $state(0);
-  let doubled = $derived(count * 2);
-
-  $effect(() => {
-    console.log(`Count is now ${count}`);
-  });
-</script>
-
-<button onclick={() => count++}>
-  {count} / {doubled}
-</button>
-```
-
-## Pattern 2: Module-Level Stores (Use Traditional Stores)
-
-```javascript
-// stores/counter.js
-import { writable, derived } from 'svelte/store';
-
-// ✅ CORRECT - Traditional stores for module-level state
-function createCounterStore() {
-  const count = writable(0);
-  const doubled = derived(count, $count => $count * 2);
-
-  return {
-    count: { subscribe: count.subscribe },
-    doubled: { subscribe: doubled.subscribe },
-    increment: () => count.update(n => n + 1),
-    reset: () => count.set(0)
-  };
-}
-
-export const counterStore = createCounterStore();
-```
-
-```svelte
-<!-- Component.svelte -->
-<script>
-  import { counterStore } from './stores/counter.js';
-
-  // Use $ auto-subscription
-</script>
-
-<button onclick={() => counterStore.increment()}>
-  {$counterStore.count} / {$counterStore.doubled}
-</button>
-```
-
-## Pattern 3: Props (Use $props)
-
-```svelte
-<!-- Child.svelte -->
-<script>
-  // ✅ CORRECT - $props for component props
-  let { value, onUpdate } = $props();
-</script>
-
-<input bind:value oninput={() => onUpdate(value)} />
-```
-
-## Common Mistakes
-
-### ❌ WRONG: Runes at Module Level
-
-```javascript
-// stores/counter.svelte.js
-// ❌ This will cause effect_orphan error!
-function createCounterStore() {
-  let count = $state(0);  // ❌ Rune outside component
-  // ...
-}
-
-export const counterStore = createCounterStore(); // ❌ Called at module load
-```
-
-### ❌ WRONG: Traditional Stores in Components
-
-```svelte
-<script>
-  import { writable } from 'svelte/store';
-
-  // ❌ Unnecessary complexity for component-local state
-  const count = writable(0);
-</script>
-
-<button onclick={() => count.update(n => n + 1)}>
-  {$count}
-</button>
-```
-
-### ✅ CORRECT: Runes in Components
-
-```svelte
-<script>
-  // ✅ Simple and idiomatic
-  let count = $state(0);
-</script>
-
-<button onclick={() => count++}>
-  {count}
-</button>
-```
-
-## Migration Checklist
-
-When converting Svelte 4 → Svelte 5:
-
-### Component-Local State
-- [ ] `export let prop` → `let { prop } = $props()`
-- [ ] `$: derived = compute(x)` → `let derived = $derived(compute(x))`
-- [ ] `$: { effect() }` → `$effect(() => { effect() })`
-
-### Module-Level Stores
-- [ ] Keep using `writable`, `derived`, `readable`
-- [ ] Update components to use `$` auto-subscription
-- [ ] Add `.subscribe` exposure in store API
-
-### File Naming
-- [ ] Component stores using runes: `Component.svelte` (not `.svelte.js`)
-- [ ] Module stores: `store.js` (not `.svelte.js`)
-
-## Debugging Tips
-
-### Error: `effect_orphan`
-**Cause**: Runes used outside component context
-**Fix**: Use traditional stores for module-level state
-
-### Error: Cannot access `$store` before initialization
-**Cause**: Missing `$` prefix on store subscription
-**Fix**: Use `$storeName.property` in templates
-
-### Store not updating UI
-**Cause**: Forgetting to use `.set()` or `.update()`
-**Fix**: Always mutate stores with `.set()` / `.update()`, never directly
-
-## Performance Comparison
-
-| Pattern | Bundle Impact | Reactivity | Use Case |
-|---------|---------------|------------|----------|
-| Runes | Minimal | Fine-grained | Component-local |
-| Traditional Stores | Small | Observable | Shared state |
-| Context API | None | Manual | Dependency injection |
-
-## Further Reading
-
-- Svelte 5 Runes: https://svelte.dev/docs/svelte/$state
-- Svelte Stores: https://svelte.dev/docs/svelte-store
-- Migration Guide: https://svelte-5-preview.vercel.app/docs/v5-migration-guide
-
----
-
-**Remember**: Runes are for components, stores are for modules.