@startsimpli/funnels 0.1.4 → 0.1.5

package/src/components/FunnelRunHistory/README.md

@@ -0,0 +1,325 @@
+# FunnelRunHistory Component Suite
+
+Comprehensive funnel execution history display with filtering, sorting, pagination, and detailed breakdowns.
+
+## Features
+
+- **Run Table** - Paginated list of all funnel executions
+- **Filters** - Filter by status, trigger type, date range
+- **Sorting** - Sorted by date (most recent first)
+- **Auto-refresh** - Polls every 5 seconds when active runs exist
+- **Details Modal** - Click row to see stage-by-stage breakdown
+- **Actions** - Re-run, view results, cancel running jobs
+- **Responsive** - Adapts to different screen sizes
+- **Accessible** - Keyboard navigation, ARIA labels, screen reader support
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { FunnelRunHistory } from '@simpli/funnels';
+import { FunnelApiClient } from '@simpli/funnels';
+
+function MyFunnelPage() {
+  const apiClient = new FunnelApiClient(adapter, 'https://api.example.com');
+
+  return (
+    <FunnelRunHistory
+      funnelId="funnel-123"
+      apiClient={apiClient}
+    />
+  );
+}
+```
+
+### With Custom Result Handler
+
+```tsx
+<FunnelRunHistory
+  funnelId="funnel-123"
+  apiClient={apiClient}
+  onViewResults={(run) => {
+    // Navigate to results page
+    router.push(`/funnels/${run.funnel_id}/runs/${run.id}/results`);
+  }}
+/>
+```
+
+## Component Architecture
+
+```
+FunnelRunHistory (main)
+├── RunFilters (filter controls)
+├── RunRow (table row)
+│   ├── RunStatusBadge (status display)
+│   └── RunActions (action dropdown)
+└── RunDetailsModal (details dialog)
+    └── StageBreakdownList (stage stats)
+```
+
+## Props
+
+### FunnelRunHistory
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `funnelId` | `string` | Yes | Funnel ID to load runs for |
+| `apiClient` | `FunnelApiClient` | Yes | API client instance |
+| `onViewResults` | `(run: FunnelRun) => void` | No | Custom handler for viewing results |
+| `className` | `string` | No | Additional CSS classes |
+
+## Table Columns
+
+| Column | Description | Format |
+|--------|-------------|--------|
+| **Date** | When run started | Relative (2h ago) with tooltip |
+| **Status** | Run status | Badge with icon |
+| **Trigger** | How run was triggered | Manual, Scheduled, API, Webhook |
+| **Duration** | Execution time | 2.3s, 1m 23s |
+| **Input** | Total entities processed | Formatted number (1,000) |
+| **Matched** | Entities matched | Formatted number |
+| **%** | Match rate | Percentage (24%) |
+| **Actions** | Action dropdown | View, Re-run, Cancel |
+
+## Status Indicators
+
+| Status | Icon | Color | Description |
+|--------|------|-------|-------------|
+| Complete | ✓ | Green | Successfully finished |
+| Running | ⏸ | Blue | Currently executing (spinning) |
+| Failed | ✗ | Red | Error occurred |
+| Pending | ○ | Yellow | Queued, not started |
+| Cancelled | × | Gray | Manually stopped |
+
+## Filters
+
+### Status Filter
+- All (default)
+- Complete
+- Running
+- Failed
+- Pending
+- Cancelled
+
+### Trigger Type Filter
+- All (default)
+- Manual
+- Scheduled
+- Webhook
+- API
+
+### Date Range Filter
+- All time
+- Today
+- Last 7 days
+- Last 30 days (default)
+
+## Actions
+
+### View Details
+Opens modal showing:
+- Run summary (status, duration, trigger)
+- Stage-by-stage breakdown
+- Error messages (if failed)
+- Actions (View Results, Re-run)
+
+### View Results
+Calls `onViewResults` prop or opens details modal by default.
+
+### Re-run
+Creates new run with same funnel configuration:
+- Sets trigger_type to "manual"
+- Adds metadata: `{ re_run_of: original_run_id }`
+- Refreshes list to show new run
+
+### Cancel
+Cancels running/pending jobs:
+- Shows confirmation dialog
+- Calls API to cancel
+- Refreshes to show updated status
+- Only available for running/pending runs
+
+## Auto-Refresh
+
+The component automatically polls for updates when there are active runs:
+- **Interval**: 5 seconds
+- **Trigger**: Detects `pending` or `running` status
+- **Cleanup**: Stops polling when no active runs
+- **Manual**: Refresh button available
+
+## Stage Breakdown Modal
+
+Click any row to open detailed view:
+
+```
+┌────────────────────────────────────────┐
+│ Run Details - 2 hours ago              │
+│ ──────────────────────────────────────│
+│ Status: Complete ✓                     │
+│ Duration: 2.3s                         │
+│ Triggered by: John Doe (Manual)        │
+│                                        │
+│ Stage Breakdown:                       │
+│ ① High ICP Score                       │
+│    Input: 1000  Matched: 500  ▼ -500  │
+│ ② Frontend Stack                       │
+│    Input: 500   Matched: 350  ▼ -150  │
+│                                        │
+│ [View Results] [Re-run] [Close]        │
+└────────────────────────────────────────┘
+```
+
+## Pagination
+
+- **Page Size**: 10 runs per page (configurable)
+- **Navigation**: Previous/Next buttons
+- **Display**: "Showing 1-10 of 47"
+- **State**: Preserved when filtering/refreshing
+
+## Responsive Behavior
+
+### Desktop (1024px+)
+- Full table with all columns
+- Action dropdown on hover
+- Detailed tooltips
+
+### Tablet (768px-1023px)
+- Hide duration and trigger columns
+- Compact action button
+- Simplified tooltips
+
+### Mobile (<768px)
+- Card-based layout
+- Stack information vertically
+- Tap to expand details
+
+## Accessibility
+
+### Keyboard Navigation
+- **Tab**: Navigate through rows and actions
+- **Enter**: Open row details
+- **Escape**: Close modal/dropdown
+- **Arrow keys**: Navigate dropdown menu
+
+### Screen Readers
+- ARIA labels on all interactive elements
+- Status announcements for loading/errors
+- Table headers properly associated
+- Modal dialog attributes
+
+### Focus Management
+- Focus trap in modal
+- Return focus to trigger after close
+- Visible focus indicators
+- Skip to content links
+
+## Utility Functions
+
+### formatDuration
+```ts
+formatDuration(2300) // "2.3s"
+formatDuration(65000) // "1m 5s"
+formatDuration(3661000) // "1h 1m"
+```
+
+### formatRelativeTime
+```ts
+formatRelativeTime(fiveMinAgo) // "5m ago"
+formatRelativeTime(yesterday) // "1d ago"
+```
+
+### calculateMatchRate
+```ts
+calculateMatchRate(235, 1000) // 24
+```
+
+### formatNumber
+```ts
+formatNumber(1234567) // "1,234,567"
+```
+
+## Testing
+
+Run tests:
+```bash
+npm run test
+```
+
+Test files:
+- `utils.test.ts` - Utility function tests
+- `FunnelRunHistory.test.tsx` - Component logic tests
+
+## Examples
+
+### All Runs (No Filters)
+
+```tsx
+<FunnelRunHistory
+  funnelId="funnel-123"
+  apiClient={apiClient}
+/>
+```
+
+### Only Failed Runs
+
+Use the filter UI or implement custom filtering:
+
+```tsx
+// User can filter via UI, or you can pre-filter server-side
+// by creating a custom API call before passing to component
+```
+
+### Custom Results Page
+
+```tsx
+<FunnelRunHistory
+  funnelId="funnel-123"
+  apiClient={apiClient}
+  onViewResults={(run) => {
+    // Custom navigation
+    navigate(`/runs/${run.id}/results`);
+  }}
+/>
+```
+
+## Generic Support
+
+This component works with **any** funnel type:
+- Investor funnels
+- Recipe funnels
+- Lead qualification funnels
+- Task prioritization funnels
+- Organization screening funnels
+
+No domain-specific logic - purely generic entity processing.
+
+## Error Handling
+
+- **Loading State**: Shows spinner while fetching
+- **Error State**: Displays error message with retry button
+- **Empty State**: Shows helpful message when no runs exist
+- **Network Errors**: Caught and displayed to user
+- **Validation Errors**: Shown in action feedback
+
+## Performance
+
+- **Pagination**: Limits results to 10 per page
+- **Auto-refresh**: Only polls when necessary
+- **Debouncing**: Prevents rapid re-renders
+- **Lazy Loading**: Modal only renders when open
+- **Memoization**: Uses React best practices
+
+## Browser Support
+
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Mobile browsers (iOS Safari, Chrome Android)
+
+## Dependencies
+
+- React 19+
+- @simpli/funnels core package
+- No external UI libraries required
+- Tailwind CSS for styling

package/src/components/FunnelRunHistory/RunActions.tsx

@@ -0,0 +1,168 @@
+/**
+ * RunActions Component
+ *
+ * Action dropdown menu for individual run rows.
+ *
+ * Design Rationale:
+ * - Dropdown menu keeps UI clean and compact
+ * - Icons provide visual cues for actions
+ * - Disabled states for invalid actions
+ * - Confirmation for destructive actions (cancel)
+ *
+ * Accessibility:
+ * - Keyboard navigation (arrow keys, Enter, Escape)
+ * - Focus management
+ * - ARIA attributes for screen readers
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { FunnelRun } from '../../types';
+
+interface RunActionsProps {
+  run: FunnelRun;
+  onViewDetails: (run: FunnelRun) => void;
+  onViewResults: (run: FunnelRun) => void;
+  onReRun: (run: FunnelRun) => void;
+  onCancel?: (run: FunnelRun) => void;
+  className?: string;
+}
+
+export function RunActions({
+  run,
+  onViewDetails,
+  onViewResults,
+  onReRun,
+  onCancel,
+  className = '',
+}: RunActionsProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen]);
+
+  const canCancel = run.status === 'pending' || run.status === 'running';
+  const canViewResults = run.status === 'completed';
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      {/* Trigger Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+        aria-label="Run actions"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+      >
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+          />
+        </svg>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-10"
+          role="menu"
+        >
+          <div className="py-1">
+            {/* View Details */}
+            <button
+              onClick={() => {
+                onViewDetails(run);
+                setIsOpen(false);
+              }}
+              className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
+              role="menuitem"
+            >
+              <span aria-hidden="true">👁</span>
+              View Details
+            </button>
+
+            {/* View Results */}
+            <button
+              onClick={() => {
+                onViewResults(run);
+                setIsOpen(false);
+              }}
+              disabled={!canViewResults}
+              className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
+              role="menuitem"
+            >
+              <span aria-hidden="true">📊</span>
+              View Results
+            </button>
+
+            {/* Re-run */}
+            <button
+              onClick={() => {
+                onReRun(run);
+                setIsOpen(false);
+              }}
+              className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
+              role="menuitem"
+            >
+              <span aria-hidden="true">↻</span>
+              Re-run
+            </button>
+
+            {/* Cancel (if running/pending) */}
+            {canCancel && onCancel && (
+              <>
+                <div className="border-t border-gray-200 my-1" />
+                <button
+                  onClick={() => {
+                    if (confirm('Are you sure you want to cancel this run?')) {
+                      onCancel(run);
+                      setIsOpen(false);
+                    }
+                  }}
+                  className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
+                  role="menuitem"
+                >
+                  <span aria-hidden="true">×</span>
+                  Cancel Run
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/FunnelRunHistory/RunDetailsModal.tsx

@@ -0,0 +1,221 @@
+/**
+ * RunDetailsModal Component
+ *
+ * Modal dialog showing detailed run information and stage breakdown.
+ *
+ * Design Rationale:
+ * - Modal overlay focuses attention on details
+ * - Stage breakdown shows funnel flow clearly
+ * - Action buttons provide next steps
+ * - Close on overlay click or Escape key
+ *
+ * Accessibility:
+ * - Focus trap within modal
+ * - Escape key closes modal
+ * - ARIA dialog attributes
+ * - Backdrop click closes modal
+ */
+
+import { useEffect, useRef } from 'react';
+import { FunnelRun } from '../../types';
+import { RunStatusBadge } from './RunStatusBadge';
+import { StageBreakdownList } from './StageBreakdownList';
+import {
+  formatDuration,
+  formatRelativeTime,
+  formatFullTimestamp,
+} from './utils';
+
+interface RunDetailsModalProps {
+  run: FunnelRun | null;
+  onClose: () => void;
+  onViewResults?: (run: FunnelRun) => void;
+  onReRun?: (run: FunnelRun) => void;
+}
+
+export function RunDetailsModal({
+  run,
+  onClose,
+  onViewResults,
+  onReRun,
+}: RunDetailsModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (run) {
+      document.addEventListener('keydown', handleEscape);
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'unset';
+      };
+    }
+  }, [run, onClose]);
+
+  // Focus trap
+  useEffect(() => {
+    if (run && modalRef.current) {
+      const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      firstElement?.focus();
+
+      const handleTab = (e: KeyboardEvent) => {
+        if (e.key !== 'Tab') return;
+
+        if (e.shiftKey && document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      };
+
+      document.addEventListener('keydown', handleTab);
+      return () => document.removeEventListener('keydown', handleTab);
+    }
+  }, [run]);
+
+  if (!run) return null;
+
+  const stageStatsArray = Object.values(run.stage_stats);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      <div
+        ref={modalRef}
+        onClick={(e) => e.stopPropagation()}
+        className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col"
+      >
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <h2 id="modal-title" className="text-lg font-semibold text-gray-900">
+              Run Details
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1 text-gray-400 hover:text-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label="Close modal"
+            >
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-4 overflow-y-auto flex-1">
+          {/* Run Summary */}
+          <div className="mb-6">
+            <div className="grid grid-cols-2 gap-4 mb-4">
+              <div>
+                <div className="text-xs text-gray-600 mb-1">Status</div>
+                <RunStatusBadge status={run.status} />
+              </div>
+              <div>
+                <div className="text-xs text-gray-600 mb-1">Duration</div>
+                <div className="text-sm font-medium text-gray-900">
+                  {formatDuration(run.duration_ms)}
+                </div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-600 mb-1">Started</div>
+                <div className="text-sm font-medium text-gray-900">
+                  <span title={formatFullTimestamp(run.started_at)}>
+                    {formatRelativeTime(run.started_at)}
+                  </span>
+                </div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-600 mb-1">Triggered by</div>
+                <div className="text-sm font-medium text-gray-900">
+                  {run.triggered_by || 'System'} ({run.trigger_type})
+                </div>
+              </div>
+            </div>
+
+            {/* Error Message */}
+            {run.status === 'failed' && run.error && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                <div className="text-sm font-medium text-red-800 mb-1">
+                  Error
+                </div>
+                <div className="text-sm text-red-700">{run.error}</div>
+              </div>
+            )}
+          </div>
+
+          {/* Stage Breakdown */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900 mb-3">
+              Stage Breakdown
+            </h3>
+            {stageStatsArray.length > 0 ? (
+              <StageBreakdownList stages={stageStatsArray} />
+            ) : (
+              <div className="text-sm text-gray-500 text-center py-4">
+                No stage data available
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            Close
+          </button>
+          {onReRun && (
+            <button
+              onClick={() => {
+                onReRun(run);
+                onClose();
+              }}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              ↻ Re-run
+            </button>
+          )}
+          {onViewResults && run.status === 'completed' && (
+            <button
+              onClick={() => {
+                onViewResults(run);
+                onClose();
+              }}
+              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              View Results
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}