npm - @exaudeus/workrail - Versions diffs - 0.8.0 → 0.8.2 - Mend

@exaudeus/workrail 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/application/app.d.ts +0 -1
package/dist/application/app.js +0 -6
package/dist/application/services/workflow-service.js +56 -4
package/dist/mcp-server.js +0 -35
package/package.json +1 -1
package/workflows/bug-investigation.agentic.json +112 -0
package/workflows/document-creation-workflow.json +1 -1
package/workflows/documentation-update-workflow.json +1 -1
package/workflows/routines/plan-analysis.json +139 -0
package/workflows/scoped-documentation-workflow.json +252 -0
package/workflows/workflow-diagnose-environment.json +24 -0
package/spec/mcp-compliance-summary.md +0 -211
package/spec/mcp-protocol-handshake.md +0 -604
package/web/DESIGN_SYSTEM_INTEGRATION.md +0 -305
package/web/assets/images/favicon-amber-16.png +0 -0
package/web/assets/images/favicon-amber-32.png +0 -0
package/web/assets/images/favicon-white-16-clean.png +0 -0
package/web/assets/images/favicon-white-32-clean.png +0 -0
package/web/assets/images/icon-amber-192.png +0 -0
package/web/assets/images/icon-amber-512.png +0 -0
package/web/assets/images/icon-amber.svg +0 -27
package/web/assets/images/icon-white-192-clean.png +0 -0
package/web/assets/images/icon-white-512-clean.png +0 -0
package/web/assets/images/icon-white.svg +0 -27
package/web/examples/BEFORE_AFTER.md +0 -691
package/workflows/IMPROVEMENTS-simplified.md +0 -122
package/workflows/systematic-bug-investigation-simplified.backup-20251106-155300.json +0 -117
package/workflows/systematic-bug-investigation-with-loops.backup-20251106-162241.json +0 -731

package/web/examples/BEFORE_AFTER.md DELETED Viewed

@@ -1,691 +0,0 @@
-# Before & After: The Component System Transformation
-## 🔴 **BEFORE: Current Approach (Bug-Prone)**
-### Creating a Dashboard Page (200+ lines)
-```html
-<!-- dashboard.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="stylesheet" href="/assets/design-system.css">
-    <link rel="stylesheet" href="/assets/components.css">
-    <link rel="stylesheet" href="/assets/animations.css">
-    <link rel="stylesheet" href="/assets/styles.css">
-    <link rel="stylesheet" href="/assets/background-effects.css">
-    <link rel="stylesheet" href="/assets/theme-toggle.css">
-    <!-- ... 10+ more style imports -->
-    <style>
-        /* Custom styles - potential for conflicts */
-        body {
-            padding: var(--space-8) 0; /* Might break header */
-        }
-        .dashboard-main {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 var(--space-6); /* Might need responsive fixes */
-        }
-        /* ... 100+ more lines of custom CSS */
-    </style>
-</head>
-<body>
-    <!-- Manual header positioning -->
-    <header class="dashboard-header">
-        <div class="header-content">
-            <button class="btn-back">← All Sessions</button>
-            <h1>🔍 Bug Investigation Dashboard</h1>
-            <div class="header-meta">
-                <span class="session-id">DASH-001</span>
-                <span class="updated">Updated: <span id="timestamp"></span></span>
-            </div>
-        </div>
-    </header>
-    <!-- Manual layout -->
-    <main class="dashboard-main">
-        <!-- Hero section - manual HTML -->
-        <div class="hero-section">
-            <div class="hero-stats">
-                <div class="stat-item">
-                    <span class="stat-label">PROGRESS</span>
-                    <span class="stat-value" id="progress">0%</span>
-                </div>
-                <!-- ... more manual stat items -->
-            </div>
-        </div>
-        <!-- Root cause card - manual HTML -->
-        <div class="card root-cause-card" id="rootCauseCard">
-            <div class="card-header">
-                <h2>🎯 Root Cause</h2>
-                <span class="status-badge" id="rcStatus">Pending</span>
-            </div>
-            <div class="card-body">
-                <div class="detail-row">
-                    <span class="label">Location:</span>
-                    <code id="rcLocation">-</code>
-                </div>
-                <!-- ... more manual rows -->
-            </div>
-        </div>
-        <!-- Hypotheses - manual rendering -->
-        <div id="hypothesesList"></div>
-        <!-- Timeline - manual rendering -->
-        <div id="timeline"></div>
-    </main>
-    <script>
-        // Manual data fetching
-        let sessionData = null;
-        let updateInterval = null;
-        async function loadData() {
-            const response = await fetch('/api/sessions/bug-investigation/DASH-001');
-            sessionData = await response.json();
-            renderDashboard();
-        }
-        // Manual rendering - error-prone
-        function renderDashboard() {
-            // Update progress
-            const progressEl = document.getElementById('progress');
-            if (progressEl && sessionData?.dashboard?.progress) {
-                progressEl.textContent = sessionData.dashboard.progress + '%';
-            }
-            // Update root cause
-            const rcLocation = document.getElementById('rcLocation');
-            if (rcLocation && sessionData?.rootCause?.location) {
-                rcLocation.textContent = sessionData.rootCause.location;
-            }
-            // Render hypotheses - manual DOM manipulation
-            const hypothesesList = document.getElementById('hypothesesList');
-            if (hypothesesList && sessionData?.hypotheses) {
-                hypothesesList.innerHTML = ''; // Clear
-                sessionData.hypotheses.forEach((h, i) => {
-                    const card = document.createElement('div');
-                    card.className = 'card hypothesis-card';
-                    card.innerHTML = `
-                        <div class="hypothesis-header">
-                            <span class="hypothesis-id">H${i + 1}</span>
-                            <h3>${h.title || 'Untitled'}</h3>
-                            <span class="status-badge status-${h.status}">${h.status}</span>
-                        </div>
-                        <div class="hypothesis-body">
-                            <p>${h.description || ''}</p>
-                            <div class="confidence">
-                                Confidence: <strong>${h.confidence || 0}/10</strong>
-                            </div>
-                        </div>
-                    `;
-                    hypothesesList.appendChild(card);
-                });
-            }
-            // Render timeline - manual DOM manipulation
-            const timelineEl = document.getElementById('timeline');
-            if (timelineEl && sessionData?.timeline) {
-                timelineEl.innerHTML = '';
-                sessionData.timeline.forEach(event => {
-                    const item = document.createElement('div');
-                    item.className = `timeline-item timeline-${event.type}`;
-                    item.innerHTML = `
-                        <div class="timeline-marker"></div>
-                        <div class="timeline-content">
-                            <span class="timeline-time">${formatTime(event.timestamp)}</span>
-                            <span class="timeline-title">${event.title}</span>
-                        </div>
-                    `;
-                    timelineEl.appendChild(item);
-                });
-            }
-        }
-        // Manual polling
-        function startPolling() {
-            updateInterval = setInterval(loadData, 2000);
-        }
-        // Manual initialization
-        document.addEventListener('DOMContentLoaded', () => {
-            loadData();
-            startPolling();
-        });
-        // Manual cleanup
-        window.addEventListener('beforeunload', () => {
-            if (updateInterval) clearInterval(updateInterval);
-        });
-    </script>
-</body>
-</html>
-```
-### Problems with This Approach
-1. **Layout bugs** - Body padding breaks fixed header
-2. **CSS conflicts** - Multiple stylesheets, potential conflicts
-3. **Manual DOM manipulation** - Error-prone, verbose
-4. **No prop validation** - Runtime errors if data is missing
-5. **No reusability** - Copy-paste code for each dashboard
-6. **Hard to maintain** - Changes require touching multiple files
-7. **No testing** - Can't test components in isolation
-8. **Accessibility issues** - Easy to forget ARIA attributes
----
-## 🟢 **AFTER: Component System (Bulletproof)**
-### Creating the Same Dashboard (30 lines)
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bug Investigation Dashboard</title>
-    <!-- Single import -->
-    <link rel="stylesheet" href="/assets/workrail-ui.css">
-    <script src="/assets/workrail-ui.js"></script>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module">
-        import { createDashboard } from '/assets/workrail-ui.js';
-        // That's it. Everything else is handled.
-        const dashboard = createDashboard({
-            workflow: 'bug-investigation',
-            sessionId: 'DASH-001',
-            // Automatic data fetching, polling, error handling
-            dataSource: '/api/sessions/bug-investigation/DASH-001',
-            updateInterval: 2000,
-            // Automatic layout, responsive, dark mode, animations
-            sections: [
-                { type: 'hero' },
-                { type: 'stats', fields: ['progress', 'confidence', 'phase'] },
-                { type: 'rootCause' },
-                { type: 'hypotheses' },
-                { type: 'timeline' }
-            ]
-        });
-        document.getElementById('root').appendChild(dashboard);
-    </script>
-</body>
-</html>
-```
-### Benefits of This Approach
-1. **Zero layout bugs** - Layout handled by system
-2. **No CSS conflicts** - Single source of truth
-3. **Automatic rendering** - Components handle DOM updates
-4. **Built-in validation** - Type checking, helpful errors
-5. **100% reusable** - Same code for all dashboards
-6. **Easy maintenance** - Update once, applies everywhere
-7. **Fully tested** - All components have tests
-8. **Accessible by default** - ARIA attributes automatic
----
-## 🎨 **Custom Dashboards Are Still Easy**
-### Need something custom? Use composition:
-```javascript
-import {
-    DashboardLayout,
-    Hero,
-    Grid,
-    Card,
-    Timeline,
-    Badge,
-    Button
-} from '/assets/workrail-ui.js';
-// Compose your own layout
-const dashboard = DashboardLayout({
-    header: {
-        title: 'Custom Dashboard',
-        backButton: true,
-        actions: [
-            Button({ text: 'Export', icon: 'download' })
-        ]
-    },
-    main: Grid({
-        columns: 2,
-        gap: 'lg',
-        children: [
-            // Custom hero
-            Hero({
-                title: 'My Investigation',
-                badge: Badge({ text: 'Active', variant: 'success' }),
-                stats: [
-                    { label: 'Progress', value: '75%' },
-                    { label: 'Time', value: '2.5h' }
-                ]
-            }),
-            // Custom card
-            Card({
-                title: 'Custom Section',
-                icon: 'zap',
-                children: [
-                    document.createTextNode('Any custom content here!')
-                ]
-            }),
-            // Timeline
-            Timeline({
-                events: [
-                    { time: '10:30', title: 'Started', type: 'start' },
-                    { time: '11:45', title: 'Found issue', type: 'success' }
-                ]
-            })
-        ]
-    })
-});
-document.getElementById('root').appendChild(dashboard);
-```
----
-## 📊 **Comparison Table**
-| Feature | Before (Manual) | After (Component System) |
-|---------|----------------|--------------------------|
-| **Lines of code** | 200+ per dashboard | 30 per dashboard |
-| **CSS files** | 10+ imports | 1 import |
-| **Layout bugs** | Common | Impossible |
-| **Dark mode** | Manual implementation | Automatic |
-| **Responsive** | Manual breakpoints | Automatic |
-| **Animations** | Manual CSS | Automatic |
-| **Error handling** | Manual checks | Automatic validation |
-| **Testing** | None | Built-in |
-| **Accessibility** | Manual ARIA | Automatic |
-| **Time to create** | 2-3 hours | 10 minutes |
-| **Maintenance** | High effort | Low effort |
-| **Bug potential** | High | Near zero |
----
-## 🚀 **The Best Part**
-### Existing dashboards keep working!
-The component system is **additive**, not replacement:
-```javascript
-// Option 1: Use full scaffold (new dashboards)
-createDashboard({ ... })
-// Option 2: Use individual components (gradual migration)
-const card = Card({ title: 'Test' });
-document.body.appendChild(card);
-// Option 3: Keep manual HTML (legacy dashboards)
-// Your old code still works!
-```
-**No breaking changes. Progressive enhancement.** ✨
-## 🔴 **BEFORE: Current Approach (Bug-Prone)**
-### Creating a Dashboard Page (200+ lines)
-```html
-<!-- dashboard.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="stylesheet" href="/assets/design-system.css">
-    <link rel="stylesheet" href="/assets/components.css">
-    <link rel="stylesheet" href="/assets/animations.css">
-    <link rel="stylesheet" href="/assets/styles.css">
-    <link rel="stylesheet" href="/assets/background-effects.css">
-    <link rel="stylesheet" href="/assets/theme-toggle.css">
-    <!-- ... 10+ more style imports -->
-    <style>
-        /* Custom styles - potential for conflicts */
-        body {
-            padding: var(--space-8) 0; /* Might break header */
-        }
-        .dashboard-main {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 var(--space-6); /* Might need responsive fixes */
-        }
-        /* ... 100+ more lines of custom CSS */
-    </style>
-</head>
-<body>
-    <!-- Manual header positioning -->
-    <header class="dashboard-header">
-        <div class="header-content">
-            <button class="btn-back">← All Sessions</button>
-            <h1>🔍 Bug Investigation Dashboard</h1>
-            <div class="header-meta">
-                <span class="session-id">DASH-001</span>
-                <span class="updated">Updated: <span id="timestamp"></span></span>
-            </div>
-        </div>
-    </header>
-    <!-- Manual layout -->
-    <main class="dashboard-main">
-        <!-- Hero section - manual HTML -->
-        <div class="hero-section">
-            <div class="hero-stats">
-                <div class="stat-item">
-                    <span class="stat-label">PROGRESS</span>
-                    <span class="stat-value" id="progress">0%</span>
-                </div>
-                <!-- ... more manual stat items -->
-            </div>
-        </div>
-        <!-- Root cause card - manual HTML -->
-        <div class="card root-cause-card" id="rootCauseCard">
-            <div class="card-header">
-                <h2>🎯 Root Cause</h2>
-                <span class="status-badge" id="rcStatus">Pending</span>
-            </div>
-            <div class="card-body">
-                <div class="detail-row">
-                    <span class="label">Location:</span>
-                    <code id="rcLocation">-</code>
-                </div>
-                <!-- ... more manual rows -->
-            </div>
-        </div>
-        <!-- Hypotheses - manual rendering -->
-        <div id="hypothesesList"></div>
-        <!-- Timeline - manual rendering -->
-        <div id="timeline"></div>
-    </main>
-    <script>
-        // Manual data fetching
-        let sessionData = null;
-        let updateInterval = null;
-        async function loadData() {
-            const response = await fetch('/api/sessions/bug-investigation/DASH-001');
-            sessionData = await response.json();
-            renderDashboard();
-        }
-        // Manual rendering - error-prone
-        function renderDashboard() {
-            // Update progress
-            const progressEl = document.getElementById('progress');
-            if (progressEl && sessionData?.dashboard?.progress) {
-                progressEl.textContent = sessionData.dashboard.progress + '%';
-            }
-            // Update root cause
-            const rcLocation = document.getElementById('rcLocation');
-            if (rcLocation && sessionData?.rootCause?.location) {
-                rcLocation.textContent = sessionData.rootCause.location;
-            }
-            // Render hypotheses - manual DOM manipulation
-            const hypothesesList = document.getElementById('hypothesesList');
-            if (hypothesesList && sessionData?.hypotheses) {
-                hypothesesList.innerHTML = ''; // Clear
-                sessionData.hypotheses.forEach((h, i) => {
-                    const card = document.createElement('div');
-                    card.className = 'card hypothesis-card';
-                    card.innerHTML = `
-                        <div class="hypothesis-header">
-                            <span class="hypothesis-id">H${i + 1}</span>
-                            <h3>${h.title || 'Untitled'}</h3>
-                            <span class="status-badge status-${h.status}">${h.status}</span>
-                        </div>
-                        <div class="hypothesis-body">
-                            <p>${h.description || ''}</p>
-                            <div class="confidence">
-                                Confidence: <strong>${h.confidence || 0}/10</strong>
-                            </div>
-                        </div>
-                    `;
-                    hypothesesList.appendChild(card);
-                });
-            }
-            // Render timeline - manual DOM manipulation
-            const timelineEl = document.getElementById('timeline');
-            if (timelineEl && sessionData?.timeline) {
-                timelineEl.innerHTML = '';
-                sessionData.timeline.forEach(event => {
-                    const item = document.createElement('div');
-                    item.className = `timeline-item timeline-${event.type}`;
-                    item.innerHTML = `
-                        <div class="timeline-marker"></div>
-                        <div class="timeline-content">
-                            <span class="timeline-time">${formatTime(event.timestamp)}</span>
-                            <span class="timeline-title">${event.title}</span>
-                        </div>
-                    `;
-                    timelineEl.appendChild(item);
-                });
-            }
-        }
-        // Manual polling
-        function startPolling() {
-            updateInterval = setInterval(loadData, 2000);
-        }
-        // Manual initialization
-        document.addEventListener('DOMContentLoaded', () => {
-            loadData();
-            startPolling();
-        });
-        // Manual cleanup
-        window.addEventListener('beforeunload', () => {
-            if (updateInterval) clearInterval(updateInterval);
-        });
-    </script>
-</body>
-</html>
-```
-### Problems with This Approach
-1. **Layout bugs** - Body padding breaks fixed header
-2. **CSS conflicts** - Multiple stylesheets, potential conflicts
-3. **Manual DOM manipulation** - Error-prone, verbose
-4. **No prop validation** - Runtime errors if data is missing
-5. **No reusability** - Copy-paste code for each dashboard
-6. **Hard to maintain** - Changes require touching multiple files
-7. **No testing** - Can't test components in isolation
-8. **Accessibility issues** - Easy to forget ARIA attributes
----
-## 🟢 **AFTER: Component System (Bulletproof)**
-### Creating the Same Dashboard (30 lines)
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bug Investigation Dashboard</title>
-    <!-- Single import -->
-    <link rel="stylesheet" href="/assets/workrail-ui.css">
-    <script src="/assets/workrail-ui.js"></script>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module">
-        import { createDashboard } from '/assets/workrail-ui.js';
-        // That's it. Everything else is handled.
-        const dashboard = createDashboard({
-            workflow: 'bug-investigation',
-            sessionId: 'DASH-001',
-            // Automatic data fetching, polling, error handling
-            dataSource: '/api/sessions/bug-investigation/DASH-001',
-            updateInterval: 2000,
-            // Automatic layout, responsive, dark mode, animations
-            sections: [
-                { type: 'hero' },
-                { type: 'stats', fields: ['progress', 'confidence', 'phase'] },
-                { type: 'rootCause' },
-                { type: 'hypotheses' },
-                { type: 'timeline' }
-            ]
-        });
-        document.getElementById('root').appendChild(dashboard);
-    </script>
-</body>
-</html>
-```
-### Benefits of This Approach
-1. **Zero layout bugs** - Layout handled by system
-2. **No CSS conflicts** - Single source of truth
-3. **Automatic rendering** - Components handle DOM updates
-4. **Built-in validation** - Type checking, helpful errors
-5. **100% reusable** - Same code for all dashboards
-6. **Easy maintenance** - Update once, applies everywhere
-7. **Fully tested** - All components have tests
-8. **Accessible by default** - ARIA attributes automatic
----
-## 🎨 **Custom Dashboards Are Still Easy**
-### Need something custom? Use composition:
-```javascript
-import {
-    DashboardLayout,
-    Hero,
-    Grid,
-    Card,
-    Timeline,
-    Badge,
-    Button
-} from '/assets/workrail-ui.js';
-// Compose your own layout
-const dashboard = DashboardLayout({
-    header: {
-        title: 'Custom Dashboard',
-        backButton: true,
-        actions: [
-            Button({ text: 'Export', icon: 'download' })
-        ]
-    },
-    main: Grid({
-        columns: 2,
-        gap: 'lg',
-        children: [
-            // Custom hero
-            Hero({
-                title: 'My Investigation',
-                badge: Badge({ text: 'Active', variant: 'success' }),
-                stats: [
-                    { label: 'Progress', value: '75%' },
-                    { label: 'Time', value: '2.5h' }
-                ]
-            }),
-            // Custom card
-            Card({
-                title: 'Custom Section',
-                icon: 'zap',
-                children: [
-                    document.createTextNode('Any custom content here!')
-                ]
-            }),
-            // Timeline
-            Timeline({
-                events: [
-                    { time: '10:30', title: 'Started', type: 'start' },
-                    { time: '11:45', title: 'Found issue', type: 'success' }
-                ]
-            })
-        ]
-    })
-});
-document.getElementById('root').appendChild(dashboard);
-```
----
-## 📊 **Comparison Table**
-| Feature | Before (Manual) | After (Component System) |
-|---------|----------------|--------------------------|
-| **Lines of code** | 200+ per dashboard | 30 per dashboard |
-| **CSS files** | 10+ imports | 1 import |
-| **Layout bugs** | Common | Impossible |
-| **Dark mode** | Manual implementation | Automatic |
-| **Responsive** | Manual breakpoints | Automatic |
-| **Animations** | Manual CSS | Automatic |
-| **Error handling** | Manual checks | Automatic validation |
-| **Testing** | None | Built-in |
-| **Accessibility** | Manual ARIA | Automatic |
-| **Time to create** | 2-3 hours | 10 minutes |
-| **Maintenance** | High effort | Low effort |
-| **Bug potential** | High | Near zero |
----
-## 🚀 **The Best Part**
-### Existing dashboards keep working!
-The component system is **additive**, not replacement:
-```javascript
-// Option 1: Use full scaffold (new dashboards)
-createDashboard({ ... })
-// Option 2: Use individual components (gradual migration)
-const card = Card({ title: 'Test' });
-document.body.appendChild(card);
-// Option 3: Keep manual HTML (legacy dashboards)
-// Your old code still works!
-```
-**No breaking changes. Progressive enhancement.** ✨